Search for a command to run...
The default container for two or more `Button`s next to each other. Just a flex row (or column) with a size-aware gap. Reach for it whenever you have a button row so spacing stays consistent across the app.
Match the size prop to the buttons inside — default for h-9 buttons, sm for h-8 rows in toolbars, lg for h-10 prominent action rows.
ButtonGroup| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "default" | Controls the gap between children — gap-1.5 / gap-2 / gap-2.5. Match the button size. |
orientation | "horizontal" | "vertical" | "horizontal" | Axis the children run along. Horizontal is items-center; vertical is items-stretch. |
className | string | — | Override the default flex w-fit (e.g. w-full + flex-1 triggers for full-width groups). |
Reach for ButtonGroup whenever you have two or more sibling Buttons. It's the system's default row spacer — keeps Cancel/Save pairs, toolbar rows, and confirm flows consistent.
Match the size prop to the buttons inside. Mixed sizes (sm ButtonGroup + default Buttons)
leave the spacing feeling off.
Use ButtonGroup as a tab strip or segmented control. Tabs (peer views) or ToggleGroup
(mutually-exclusive choice) have the right semantics and the sliding active indicator.
Stack 5+ buttons in one group. Past that the row reads as noise — move secondary actions to a
DropdownMenu.