Button Group

Visually merges related buttons into one segmented control — shared outer borders, consistent spacing, optional vertical stacking.

Wrap two or more Button components; set vertical=true for narrow panels. Style each child button explicitly — the group only handles layout. Does not enforce single selection. Disable the whole group with <fieldset disabled> wrapping the group.

  • Save/Cancel or Approve/Reject action pairs
  • Toolbar segments (Cut/Copy/Paste)
  • Vertical action stacks in narrow panels
  • Wrap two or more Button components inside ButtonGroup.
  • Set vertical=true for stacked layouts.
  • Wrap preview examples in a native element with data-testid for E2E selectors.
Default group

Horizontal primary and secondary pair with merged borders for related form actions.

Vertical stack

Stacks buttons vertically for narrow panels, sidebars, or mobile layouts.

Subtle toolbar actions

Low-emphasis segmented toolbar for Cut, Copy, Paste, and similar utility actions.

Icon actions

Icon-only buttons grouped into one compact toolbar segment with shared borders.

Disabled in fieldset

Entire group disabled via a native <fieldset> when the workflow is temporarily unavailable.