All components

Segmented Control

Segmented Control is a compact row of segments each functioning like a button, allowing users to pick from closely related options in a single space.
Segmented Control

A segmented control arranges multiple segments (often a row of buttons) that each represent a related option. Only one segment can be active for a single-choice design, though some implementations support multiple selections. The chosen segment is highlighted, making it visually clear which option or filter is applied.

This layout is perfect for toggling between related states (like day/week/month views or style options) within the same context. Segmented controls unify what could otherwise be scattered choices, reducing confusion and letting people quickly sample different modes or data sets in a single glance.

Feed your mobile app design appetite

Turn blank screens into mouthwatering UIs in minutes
L(a)unch Now