Segmented Controls
Segmented controls are a set of connected buttons that let users switch between views, categories, or modes. Only one segment is active at a time.
Philosophy
Segmented controls make mutually exclusive choices simple and visible.
They present options side by side for quick comparison.
They provide an efficient way to switch contexts without leaving the screen.
They maintain clarity by showing all options upfront instead of hiding them in menus.
Anatomy
Variants
Standard
Options represented by words (e.g., “Day / Week / Month”).
States
Idle
All segments visible, first preselected.
Material
Liquid glass
Read more
Usage tips
Dos
Use when there are 2–5 mutually exclusive options.
Label options clearly and concisely.
Don’ts
Don’t use segmented controls for long or complex lists (use dropdowns instead).
Don’t overload with too many segments — it reduces clarity.
Real-world example
