Button Group
Joins a row or column of Buttons (or inputs) so adjacent corners and borders collapse cleanly. Use for segmented controls, attached input + button, or toolbars.
Default
Buttons sit flush against each other with shared borders and rounded outer ends.
Orientation
Set orientation to vertical to stack the buttons.
Size
Control the size of buttons using the size prop on individual buttons.
Nested
ButtonGroups nest: each child group keeps its own rounded ends.
Separator
ButtonGroupSeparator draws a divider that matches the group's border.
Split
Create a split button group by adding two buttons separated by a ButtonGroupSeparator.
Input
Pair an Input with buttons so they read as one control.
Dropdown Menu
Use a DropdownMenu trigger as the trailing button.
Select
A Select can join the group as its leading control.
Vertical
Project extra: the vertical group on its own.
API Reference
ButtonGroup
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Axis of the group. |
class | string | — | Extra classes, merged with cn(). |
ButtonGroupSeparator / ButtonGroupText
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Visual separator and inline static text label inside a group. |