Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
Live Demo
Actually clickableCurrently showing: today cleanup records
What you just saw:The Day / Week / Month control at the bottom of the iOS Photos viewer, the segmented button on a Mac, the List / Map toggle in a maps app.
What it actually is
A segmented control is a compact button group where the selected segment gets a filled highlight. The key distinction: it looks a lot like tabs, but a segmented control switches between small views of the same content rather than between different pages.
Anatomy · What it's made of
Track外框
Light gray background wrapping all segments
Segment分段
Equal width or sized to content
Selected选中
White fill plus a shadow
Label文字
One to four words is ideal
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Switching between two and four views | Yes |
| All the options are very short (one to four words) | Yes |
| You want the control to hug its content instead of spanning full width | Yes |
| Each option needs its own URL | No |
| The option labels vary a lot in length | Depends |
If each view needs to be shareable or bookmarkable (its own URL), use Tabs.
Wildly different label lengths make the segments look broken — either use icons uniformly or switch to a Select.
Similar Patterns
Don't mix these upSegmented ControlCurrent
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
In one line:A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Radio Button
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a Segmented Control with three segments — Day / Week / Month — where the selected item has a white fill and a subtle shadow. Switching only affects the same region of the page and never changes the URL.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few buttons that toggle.
Say this instead
Add a Segmented Control: two to four segments inside a light gray track, the selected one with a white fill and a shadow, the sliding pill animated with transform, expressed with role=tablist/tab plus aria-selected, and never changing the URL.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.