STRATA

Components / Button Group

Button Group

Related controls fused into one segmented row with flush inner corners: prev/next pairs, split buttons, a count beside its action.

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@layers/ui/button-group'

Rendered stock

House rules

  • Children keep their own Button variants; the group removes inner radii and doubled borders. orientation="vertical" stacks instead.
  • ButtonGroupSeparator divides segments that share a background (the split-button pattern); outline buttons already read as divided.
  • Buttons stay text-only or icon-only with an aria-label, same as everywhere else. Toolbar instances use size="sm" children.
  • View toggles are TabsList, not a ButtonGroup of pressed states.