Button group
A row of action buttons that share chrome so they read as a single control.
Basic
For press toggles and segmented controls, see Toggle and Toggle group. .button-group is purely visual grouping for action buttons, with no state hooks and no JS. Wrap two or more .buttons in .button-group with role="group" and an aria-label. Outer corners round, inner corners square, adjacent borders dedupe into a single seam.
Outline
Outline members work the same way, with adjacent borders deduping at the seam.
Mixed
A loud action paired with a quiet alternative, locked together as one chip.
Sizes
Add .button-group--sm or .button-group--lg on the wrapper. The modifier retunes the child --button-* vars so every member scales together.
With icons
Icons compose the same as in standalone buttons. .button--icon-only gives a square slot.
Split button
Pair a primary action with a caret-only trigger. The trigger reuses .button--icon-only with a chevron, so no split-specific class ships. (Menu attach behavior lands with the Menu component.)
Vertical
Swap .button-group for .button-group--vertical to stack the members. Outer corners round on the top and bottom instead of left and right.
Toolbar
Combine multiple groups under .button-toolbar. It carries a default gap between groups so they breathe without inline utility classes.
Customization
Two variables retune .button-group + .button-toolbar. Sizes retune the child --button-* vars in modifier scope, keeping the group free of per-size vars. To recolor a cluster, set --button-bg / --button-tone on the members themselves.
| Variable | Use |
|---|---|
--button-group-radius | Outer corner radius; inner corners stay square. The sm and lg variants reassign this |
--button-toolbar-gap | Space between groups inside a .button-toolbar |