ButtonGroup
Markdown for agentsJoins buttons into one segmented control: adjacent borders collapse, middle corners square off, and only the outer corners stay rounded — a single outline around the group.
npx slipstream-ui@latest add button-groupView mode toggle (interactive)
view: list — segments share one outline; the active segment carries the primary surface.
Vertical stepper (interactive)
step 2 — stacked segments share the horizontal edge.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Stacked segments share vertical edges; default lays them side by side. |
| children | ReactNode | — | Direct Button children — each keeps its own variant/size but must keep a border. |
Accessibility
- role=group — always pass aria-label (or aria-labelledby) so the group name precedes its buttons.
- Focus rings lift above neighbours (relative + z-10) instead of clipping.
- Native tab order; for exclusive views with panels prefer Tabs.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.