Components
Button Group
Groups multiple buttons together with shared borders and consistent sizing.
Loading
Installation
pnpm dlx shadcn@latest add @toui/button-group
Examples
Default (Attached)
Loading
Spaced
Loading
Vertical
Loading
With Icons
Loading
Sizes
Loading
Pattern
Tokens
1 CSS variable in 1 categories.
gap
| CSS Variable | Value | Description |
|---|---|---|
--button-group-gap | var(--component-gap-xs) | Gap between buttons when not attached |
API Reference
ButtonGroup
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
attached | boolean | true |
Credits
- Built with Radix UI Slot.