Actions
SegmentedControl
A row of mutually exclusive options on a gray track; the selected one lifts onto the base color with a dark outline.
Preview
Props
| Prop | Type | Description |
|---|---|---|
itemsRequired | { key: string; label: React.ReactNode; icon?: IconName }[] | |
labelRequired | string | |
value | string | |
defaultValue | string | |
onChange | (key: string) => void | |
size | 'M' | 'L' | |
className | string |
Guidelines
A row of mutually exclusive options on a gray track; the selected one lifts onto the base color with a dark outline.
Provide: items ({ key, label, icon }), label (what the options choose), and value with onChange, or defaultValue.
- Two to five short options that change the view right away (format filter, time range).
- For many categories, use Tags; for actions, use buttons.
- The chosen segment has the selected style: a raised thumb (
selected-fill,selected-shadow) with bold text, the same as the current nav item, the phone tab bar, Tabs and ThemeToggle.
- The thumb slides from the old choice to the new one (
motion-duration-200,motion-ease-in-out), the same as Tabs. Reduced motion moves it at once.