'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Actions
SegmentedControl
One choice among two to five options, shown as a row of pills. ToggleButton is the single on/off version.
Ant Design: Segmented
import { SegmentedControl, ToggleButton } from '@alea/ui';
Examples
Segmented control
A short, exclusive choice. The first option is selected unless you set one.
Showing: week
Small
For toolbars and dense panels.
ToggleButton
One button that stays pressed, like Bold. aria-pressed tells screen readers.
Props
SegmentedControl props
One choice among a few, as a row of pills (Ant's Segmented).
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | { id: Key; label: ReactNode; isDisabled?: boolean | undefined; }[] | - | The options: id and label. |
aria-label | string | - | Label for screen readers. |
defaultValue | Key | - | Selected id to start with. |
onChange | ((value: Key) => void) | - | Called with the id of the option picked. |
size | "sm" | "md" | 'md' | sm (28 px) or md (34 px, default). |
value | Key | - | Selected id (controlled). |
ToggleButton props
A button that stays pressed (bold, mute, pin).
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | 'md' | sm (32 px) or md (40 px, default). |
Accessibility
- The group is a radio group: one option is always selected and announced as such.
- ToggleButton is a button with aria-pressed.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves into the group (to the selected option) |
| Arrow keys | Move between options |
| Enter or Space | Selects the focused option |
Do and don't
Do
- Use for views of the same content (Day, Week, Month).
- Keep labels short, one or two words.
Don't
- Don't use for more than five options: use Select.
- Don't use for actions: use Buttons.
In Figma
Segmented control with 2 to 5 items and a Selected property per item.