A segmented toolbar wrapper that fuses adjacent buttons into one control with shared hairline borders.
SegmentedSplit action
<ButtonGroup label="View options"> <Button variant="ghost">Day</Button> <Button variant="ghost">Week</Button></ButtonGroup>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { ButtonGroup } from '@chanrg/4ui';<ButtonGroup label="View options"> <Button variant="ghost">Day</Button> <Button variant="ghost">Week</Button></ButtonGroup>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible name for the group. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Renders role="group" with an accessible label; each button keeps its own semantics.