Components
Button group
Buttons that share an edge, and a split button.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/button-group.jsonThe dividers are shared borders
Children lose their own rounding except at the ends, and each overlaps the previous by a pixel. Without that overlap you get double-thickness dividers, which is the tell that a group was built by putting buttons next to each other rather than joining them.
The split button's default is one click
The primary action is a real button, not the first item of a menu — the common case should not cost two clicks. The caret is a separate hit target, so reaching for an alternative can never fire the default by accident.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | ButtonGroup takes Buttons; SplitButton takes its label. |
| onClick | () => void | — | SplitButton. The default action. |
| onMenu | () => void | — | SplitButton. Opens the alternatives. |
| variant | "default" | "primary" | "default" | SplitButton. |