Navigation
Overlays
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
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.