Components
Button Group
Joins a set of related buttons into a single, visually-connected control — flattening the seams between adjacent members and collapsing their shared borders.
Basic usage
Wrap any number of Button elements — the group fuses their adjacent corners and borders into one segmented control.
Orientation
Set orientation="vertical" to stack members in a column — ideal for a floating toolbar.
With a separator
Drop a ButtonGroupSeparator between members to split a primary action from a dropdown trigger.
With static text
ButtonGroupText renders a non-interactive label that sits flush inside the group — perfect for steppers or a unit suffix.
Props
ButtonGroup
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Lays the children out in a row or a column, joining their adjacent edges accordingly. |
className | string | — | Additional Tailwind classes to merge onto the group wrapper. |
...rest | React.ComponentProps<'div'> | — | All native div attributes are forwarded to the wrapper. |
ButtonGroupSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'vertical' | Direction of the dividing line drawn between two members of the group. |
className | string | — | Additional Tailwind classes to merge. |
...rest | React.ComponentProps<typeof Separator> | — | All Radix Separator props are forwarded. |
ButtonGroupText
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merges props onto the child element instead of rendering a div, via Radix Slot. |
className | string | — | Additional Tailwind classes to merge. |
...rest | React.ComponentProps<'div'> | — | All native div attributes are forwarded. |
Accessibility
- The wrapper carries
role="group", signalling to assistive technology that the buttons form a single related set. - Each member remains an independent native
<button>, so Tab, Enter, and Space behave exactly as on a standalone button. - The focused member is lifted above its neighbours so the brand
focus-visiblering is never clipped by an adjacent collapsed border. - Always pass an
aria-labelto icon-only members, since the joined layout offers no visible text label. - The separator is decorative by default and is correctly omitted from the accessibility tree.