ButtonGroup

Usage

SButtonGroup squares off each button's inner corner and overlaps their 1px rings so the shared edge isn't double-thick, bumping the hovered/ focused button's edge on top of its neighbor's:

<SButtonGroup>
  <SButton variant="outline">Day</SButton>
  <SButton variant="outline">Week</SButton>
  <SButton variant="outline">Month</SButton>
</SButtonGroup>

Vertical

orientation="vertical" stacks buttons vertically, squaring off the top/ bottom corners instead:

<SButtonGroup orientation="vertical">
  <SButton variant="outline">Submit</SButton>
  <SButton variant="outline">Cancel</SButton>
</SButtonGroup>

SButtonGroup isn't limited to buttons - see InputGroup for the same joining mechanism extended to Input/Select/Textarea, which carry their own ring/radius one level deeper than a Button does.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's ButtonGroup's own theme file:

Global and scoped theme recipes use ui.buttonGroup.

Props