Build Assets
UI Component
Segmented Control
A linear set of mutually exclusive options shown together for quick switching between views or modes.
Platform: bothTags: control, toggle, switch, navigation
Purpose
Presents 2–5 mutually exclusive options at once so users can switch instantly without opening a menu. Best when all options benefit from being visible and the count is small (Hick's Law: keep choices few).
Anatomy
- Track: rounded container with subtle background, 2px inner padding
- Segments: equal-width option buttons sharing the track
- Active indicator: filled segment (surface color) with slight elevation
- Labels: 14px medium; optional icons for icon-only variants
States
- Default: all segments neutral, one selected
- Selected: raised/filled segment, stronger text color
- Hover (unselected): text color strengthens
- Focus: focus ring on the focused segment
- Disabled: whole control or individual segment dimmed
Tokens
spacing
trackPadding: 2pxsegmentPaddingX: 12pxsegmentPaddingY: 6px
sizing
height: 36pxborderRadius: 8px
Do
- Limit to 2–5 options that fit on one line
- Keep all option labels a similar length for even segments
- Use for switching views/modes where the current choice should stay visible
- Ensure the selected state reads without relying on color alone
Don't
- Use for more than ~5 options - use tabs or a select instead
- Use for multi-select - that is a set of toggles/checkboxes
- Mix icon-only and text segments in the same control
- Use where the options need descriptions - use radio cards
Accessibility
- Group with role="radiogroup"; each segment role="radio" with aria-checked
- Or, for view switching, use the tablist/tab pattern consistently
- Full keyboard support: arrow keys move between segments
- Selected segment distinguished by more than color (elevation, weight)