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.
Usage
Import the parts you need from the component's folder.
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group";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. |