Switches
V 1.0View in Storybook
Pill-shaped segmented control with 2–4 segments at two sizes (small / big).
Playground
3
URL
https://design-system-ashu.vercel.app/iframe.html?id=components-switches--playground&viewMode=story&args=size%3Asmall%3Bcount%3A3Code
<Switches size="small" count={3} />Props
| Name | Type | Default |
|---|---|---|
size | 'small' | 'big' | 'small' |
count | number | 3 |
Usage guidelines
When to use
- Use for toggling between 2–4 mutually exclusive views or filter states within a section.
- The big size works well as a primary content switcher; small fits inline in toolbars.
- Keep segment labels concise — one or two words each.
When not to use
- Don't use more than 4 segments; the layout becomes crowded and hard to tap.
- Don't use as a replacement for page-level navigation tabs.
- Avoid mixing icon-only and label-only segments within the same control.