Button Group
A button group places related actions together with consistent spacing, borders, and focus
behavior. Label each group with aria-label or aria-labelledby.
Use ButtonGroup for actions. Use ToggleGroup when the controls represent persistent selected
states.
Orientation
Sizes
Set size on each button in the group.
Separator
Use a separator between borderless button variants. Outline buttons already provide their own dividers.
Text
ButtonGroupText adds non-interactive content to the group. Use render when the text needs
different semantics, such as a form label.
Nested groups
Nested button groups receive spacing while the actions inside each nested group remain connected.
Component props
ButtonGroup
| Name | Type | Description |
|---|---|---|
| orientation | "horizontal" | "vertical" | Layout direction (default: "horizontal") |
| aria-label | string | Accessible label for the group |
ButtonGroupSeparator
| Name | Type | Description |
|---|---|---|
| orientation | "horizontal" | "vertical" | Separator direction (default: "vertical") |
ButtonGroupText
| Name | Type | Description |
|---|---|---|
| render | RenderProp | Renders the text with a custom element |