Actions
Button group
The usual button group welds outlined buttons into a segmented slab, which makes a set of actions look like a set of choices. This one keeps every action a plain word and gives the group a single hover rail that slides between them. The set reads as a set because one highlight is shared - and a shared highlight only makes sense if the actions really do belong together, so the component enforces the thing it is claiming.
npx shadcn@latest add @minflow/button-groupWhere to use it
- Two to four actions on one object: edit, duplicate, archive.
- Toolbars and row actions, where the group needs to read as one unit against everything else on the row.
- Reach for Segmented control instead when the buttons pick a value - a group of actions has no selected state to show.
Variations
Horizontal
The default. The rail travels sideways between actions, which is the movement that makes them read as one control.
Vertical
Inside a narrow column or a menu-like panel, where a horizontal row would wrap and lose the grouping.
With glyphs
When the actions are familiar enough that a glyph speeds up recognition. Keep the words - an icon-only group is a toolbar, and that is Icon button's job.