- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
ButtonGroup
Groups related buttons together with border-collapse and rounded outer edges. Supports horizontal and vertical orientations. Includes ButtonGroupSeparator and ButtonGroupText sub-components.
Figma: DS-001 Foundations · 18672:224279
Import
Live Demo
Horizontal, vertical, and separated button groups.
Orientation × Variant matrix (Figma 18672:224279)
| Orientation | outline | default | secondary |
|---|---|---|---|
| horizontal | |||
| vertical |
Size matrix
| Size | Text buttons | Icon buttons |
|---|---|---|
| sm | ||
| default | ||
| lg |
With icons
Vertical
ButtonGroup + Input (Figma 18707:209306)
Buttons at start (Figma 18707:209305)
Buttons at both ends (Figma 18707:209304)
Buttons at end (Figma 18707:209303)
Mixed content
With a dropdown trigger
Props
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the button group |
Examples
Horizontal Group
Vertical Group
With Separator
Add visual separation between groups of buttons.