Button group

shadcn/ui button-group on DESIGN.md tokens. Joins related controls edge to edge: inner corners go square, the shared border collapses to one hairline, and the outer corners keep each control's own radius. Grouped buttons are flat, because joined controls cannot lift one at a time. Use it for segments, split buttons and small toolbars.

<ButtonGroup>
  <Button variant="outline" size="sm">Day</Button>
  <Button variant="secondary" size="sm" aria-pressed>Week</Button>
  <Button variant="outline" size="sm">Month</Button>
</ButtonGroup>

Segments

Outline buttons at sm and default. The active segment is secondary and aria-pressed; a set that must always hold one value is a Toggle group.

Icon buttons

Square icon-sm buttons; a separator splits sub-groups of one toolbar.

Split button

One filled action plus a chevron that opens its variants; the group paints a single action gradient across both and darkens it on hover as one control. The opposite action never hides under the chevron: Reject stands beside it.

Text and inputs

A label cell whose chooser carries its current value the way Segments does, a working stepper whose cell is a polite live region, and a group that joins an Input to a Select.

Per page
3

Vertical and nested

Stacked segments, and two groups inside one, 8px apart.

Separator

The primitive underneath: a 1px hairline, horizontal by default, decorative unless it divides content.

Invoice #4471 approved by Invoice agent
Queue
Ledger
Archive