Button group
Joins related actions into one pill so they read as a set. Each button keeps its own focus stop and its own label.
bunx --bun shadcn@4.17.0 add @waimakers/button-group- npm dependencies
- @base-ui/react@1.9.0class-variance-authority@0.7.1
From the registry
Related actions joined horizontally or vertically, with independent keyboard focus.
Examples
Horizontal
The common case: a few actions on the same record, side by side.
With text
ButtonGroupText labels or counts what the buttons act on.
Vertical
Stacked actions for narrow panels and reorder controls.
Nested
Groups inside a group keep a gap between sets, for a toolbar with several clusters.
States
One disabled action leaves the rest usable. The focus ring lifts the focused button above its neighbours.