ButtonGroup

Keeps related buttons together. Spaced for sets of separate actions, attached for a segmented look, toolbar for a strip of tools, and stackOnNarrow for form footers that should go full width on a phone.

ButtonGroup

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ButtonGroup

Spaced

Attached toolbar

Vertical, attached

Form footer, stacks on a phone

Dark theme, ButtonGroup

Spaced

Attached toolbar

Vertical, attached

Form footer, stacks on a phone

High contrast theme, ButtonGroup

Spaced

Attached toolbar

Vertical, attached

Form footer, stacks on a phone

UsageLink to the section Usage

tsx

import { ButtonGroup } from '@skribly/ui/actions'

tsx

<ButtonGroup label="Formatting" toolbar attached>
  <ToggleButton aria-label="Bold"><Bold aria-hidden /></ToggleButton>
  <ToggleButton aria-label="Italic"><Italic aria-hidden /></ToggleButton>
</ButtonGroup>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A plain group has role="group" and label as its name; every button keeps its own Tab stop.
A toolbar is one Tab stop: Left and Right (Up and Down when vertical) move between buttons, mirrored in right-to-left text.
Groups wrap at narrow widths instead of scrolling.

This demo runs through axe in all three themes on every test run. See what the tests check.