Tabs vs Segmented Control
Why they look alike but are not the same thing
I have a set of options to switch between. Tabs or Segmented Control?
Comparison table
| Pattern | What it switches | Own URL | How many | Width |
|---|---|---|---|---|
| Tabs标签页 | A whole body of content (page level) | Yes, one URL per tab | 2–5 | Spans the full width |
| Segmented Control分段控件 | A state inside one small control | No (same page) | 2–4 | Compact, hugs its content |
← Swipe to see the full table
The demos, side by side
Tabs
标签页- Went to the beach today and found a really unusual piece of sea glass
- Spent the whole afternoon shooting, just for this one frame
- Overcast works too — the light is so soft
How to decide: Switching between different content
Segmented Control
分段控件Currently showing: today cleanup records
How to decide: Switching between views of the same content
Decision rule
- each option needs its own linkable, bookmarkable URLuse Tabs
- you only want to flip a small view in place (like day / week / month)use a Segmented Control
- you have more than 5 optionsuse a Select dropdown instead of forcing it
Quickest test: Tabs span the full top of a page; a Segmented Control is a small button group. If the switch should stay on one URL, it is a Segmented Control.