ButtonGroup
Explore interactive examples and all component variations in our Storybook.
The ButtonGroup component visually merges a set of related buttons into a single cohesive control. Adjacent borders are collapsed and border radii are adjusted automatically so the group reads as a unit rather than a collection of separate buttons. It supports both horizontal and vertical orientations.
Basic Usage
Wrap any number of Button components in a ButtonGroup to connect them into a segmented control.
Vertical Orientation
Set orientation="vertical" to stack buttons in a column. Borders and border radii adjust automatically.
With Icons
Icon-only button groups are a common pattern for toolbar alignment controls. Keep buttons equal width for a polished look.
Mixed Variants
Different button variants can coexist inside a single group to communicate distinct action weights — for example, a primary save action alongside a neutral preview and a destructive delete.
Pagination Controls
ButtonGroup with size="sm" is well suited for compact pagination toolbars. Combine jump-to-end buttons with numbered pages for a complete control.
Properties
ButtonGroup
| Property | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Controls whether buttons are arranged in a row or a column. |
className | string | — | Additional CSS classes merged with the group container. |
children | ReactNode | — | The Button elements that make up the group. |
(All native div attributes) | — | — | All standard HTML <div> attributes are forwarded to the underlying element. |