Components
Segmented Control
A mutually exclusive option selector. Uses a full pill container with a sliding active segment. One of the few places where 9999px radius is correct.
Examples
3 options — Day active
Surface mode — Product active
Specifications
Container radius
9999pxContainer bg
#eef0f3Container padding
4pxActive segment
white + box-shadow: 0 1px 3px rgba(10,11,13,0.10)Active radius
9999pxHeight
36–40pxFont size
13–14pxFont weight
500–600 (inactive) / 600 (active)Min item width
56pxRules
- Use for mutually exclusive options where one is always selected.
- Limit to 2–5 options. More than 5 should use a dropdown select.
- Labels should be nouns or short adjectives — not sentences.
- The active state uses white background + subtle shadow, not a blue highlight.
- This is one of the only components that correctly uses 9999px radius.