Segmented Control
also known assegmented buttons · toggle group · pill switcher · tab switcher
A horizontal row of mutually exclusive options where exactly one is selected, styled as connected pill buttons.
A segmented control is a horizontal cluster of 2–5 connected buttons where exactly one is always selected. The selected segment has a distinct background (usually white on a gray track), and the unselected segments share the track color with muted labels. Switching selection animates the active background sliding from one segment to another.
It's the modern, compact alternative to radio buttons or tabs for short option sets — `Day / Week / Month / Year`, `List / Grid`, `Light / Dark / Auto`. The single-row form makes the available options scannable at a glance and the choice tactile.
Keep segments to 5 or fewer; beyond that, switch to a dropdown. Each label should be 1–2 words; long labels break the visual rhythm. The selected segment usually carries a subtle shadow to lift it off the track.
- Short, mutually-exclusive option sets (2–5 choices)
- View toggles (List/Grid, Day/Week/Month)
- Theme switchers (Light/Dark/Auto)
- Compact filters above tables or charts
- More than 5 options — use a dropdown or tabs
- Multi-select choices — use checkboxes or a button group
- Long labels that don't fit in equal-width segments
- +Animate the active background sliding between segments
- +Keep all segments equal width when labels are short
- +Add a subtle shadow to the active segment for tactile feedback
- −Don't mix icon-only and text segments in the same control
- −Don't use for multi-select — that's a button group
People also ask
Segmented control vs tabs — what's the difference?
Tabs switch the entire content area below them. Segmented controls switch a small attribute — like a chart's time range or a list's view mode — while the surrounding content stays. Tabs imply 'whole new page', segmented implies 'same page, different view'.