sheengemologic ui
All components

ButtonGroup

A labeled group of related native actions with horizontal or vertical layout.@gemologic/sheen · primitives

Playground

<ButtonGroup label="Document actions"><Button>Save</Button><Button>Discard</Button></ButtonGroup>

Variant matrix

Document actions
orientation: horizontal
orientation: vertical

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/ButtonGroup.tsx
Tokens
  • --sheen-space-inline-xs

Accessibility

Role: groupKeyboard: Tab visits enabled actions in DOM order, Enter and Space activate native buttons

Do

  • Give each button its own accessible name, disabled state, and action.

Do not

  • Do not use this as a single-selection control.
  • Use Toolbar for a toolbar's roving keyboard model.

Generated props

NameTypeDefaultDescription
label *string—Required nonempty accessible group name.
orientation"horizontal" | "vertical"—Layout direction, horizontal by default; does not change keyboard behavior.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.