Home/Components/Segmented control

Segmented control

A two-to-four-option picker rendered as a pill of segments. The active segment lifts on a surface; the others stay flush.

Stable .segmented 2–4 options

Usage

Use for mutually-exclusive choices that fit on one row.

Day/Week/Month.segmented

Sizes

Three heights. Use the small inside tables and toolbars.

Small (24)
toolbar
Default (28)
Large (40)

With icons

Icon + label

Do & don't

Do

Limit to four options. More than that becomes a row of tabs or a select.

Don't

Mix label lengths wildly — "All" + "Form 4 Faraday" + "Active" reads as broken.

Do

Reach for it when the choice is short, exclusive, and shouldn’t feel like navigation.

Don't

Use a segmented control for boolean state. A switch is the right primitive.