Button group
A button group shows related actions together.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { ButtonGroup } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | The buttons, in order. The primary one goes last, where the reader finishes reading. |
| label | string | — | Names the group for assistive technology, as in Queue actions. |
| appearance | 'default' | 'primary' | 'subtle' | 'warning' | 'danger' | 'discovery' | 'link' | — | Applies one appearance to every button in the group. Leave it out when they differ. |
| spacing | 'default' | 'compact' | — | Compact for a dense row. |
Accessibility
What the component does for you, and what it needs from you.
- The group name lets a screen reader announce the set, so three buttons are heard as one decision rather than three loose controls.
- Order in the markup is order on the keyboard, so the visual order and the tab order stay the same.