Button Group
Group related buttons together for compact layouts and better organization
The button group fuses related buttons into a single connected control with shared borders and rounded outer corners. Use it for toolbars, segmented actions, split buttons, and input add-ons like search bars.
Preview
Installation
Usage
Composition
Examples
Orientation
Use orientation to lay the buttons out in a row or a column.
| Value | Description |
|---|---|
"horizontal" | Arranges buttons in a row (default). |
"vertical" | Stacks buttons in a column. |
Size
Set the size on the child buttons; the group inherits it.
Nested
Nest button groups to build compound layouts such as pagination controls.
Separator
Use ButtonGroupSeparator to divide buttons within a group; skip it when the button variant already has a border.
With Input
Place an input directly inside the group for search bars and similar patterns.
Complex Input Group
Combine nested groups, inputs, and toggleable controls into a single input layout.
With Dropdown
Pair a button with a dropdown menu for actions that need extra options.
With Select
Fuse a Select into the group for dynamic form and input combinations.
With Popover
Anchor a popover to a button in the group for contextual panels and assistants.
With Text
Use ButtonGroupText to display a read-only label inline with the buttons, for pagination indicators, stepper values, or any non-interactive segment fused into the group.
API Reference
The Button Group is a custom layout component for grouping related buttons. All props listed below are custom to this implementation.
Props
ButtonGroup
Container that groups buttons together with connected styling. Renders a div with role="group".
ButtonGroupSeparator
Visual divider between buttons within a group. Wraps the Separator component. Accepts all Separator props.
ButtonGroupText
Styled container for non-button content (text, icons) within a button group. Renders a div with muted background styling. Accepts standard div props.