button-group

Button Group

Joins related buttons into one connected row or column, with separators and text labels between them.

States: Default, Focus

Parts

Part	File	Does
ButtonGroup	ButtonGroup.vue	Joins related buttons into one connected group.
ButtonGroupSeparator	ButtonGroupSeparator.vue	Separates two buttons inside a button group.
ButtonGroupText	ButtonGroupText.vue	Shows a text label as part of a button group.

Styling

Part	Recipe
ButtonGroup	button-group
ButtonGroupSeparator	button-group-separator
ButtonGroupText	button-group-text

Install

Writes 5 files into components/ui/button-group/. For agents, npx @frontic/ui docs button-group prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; class-variance-authority; reka-ui

API reference

ButtonGroup ButtonGroup.vue

Joins related buttons into one connected group. Renders a <div>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
class	ClassValue	—

orientation	ButtonGroupOrientation

Data attribute	Values
data-orientation	'vertical' \| 'horizontal'

Recipe button-group	Sets
base: button-group	3 properties

ButtonGroupSeparator ButtonGroupSeparator.vue

ButtonGroupText ButtonGroupText.vue

Example