Tabs
Switch between sibling views of the same record. Three visual styles for three roles — underline for top-of-page hierarchy, segmented for inline switches, pill for filtering.
Canonical tab-strip primitive.
Per audit-reuse D-7, p-tabs is the single tab primitive, folding the three visual styles (.under-tabs, .seg-tabs, .iconstrip) into one API. Legacy .kit-tab / .tabs / .tabstrip markup keeps working through deprecation aliases in components.css.
Underline
Top-of-page tabs. The 2 px brand underline reads as primary navigation.
Segmented
Filled pill-of-buttons. Use inline (inside a card) where underline would compete with the page hierarchy.
Pill
Filter-style tabs that read as choices, not as primary navigation. Good for filter rails and category switches.
Vertical
For settings rails and side-anchored content switches. Always pair with content right.
Branch profile
Park Centre · 24 Borrowdale Rd, Harare · Opened 14 Feb 2019.
Parts
| Property | Value | Notes |
|---|---|---|
| tab height | 40 px underline · 36 segmented · 32 pill | — |
| indicator | 2 px brand underline · brand-soft fill · ink fill | One per variant |
| icon | 14 px leading | Optional |
| count badge | 10 px mono · 9999 radius | Inline after label |
| keyboard | ← / → cycles · Home / End jump | Roving tabindex |
Do & don't
Pick one tab style per page. Mixing them muddles hierarchy.
Use tabs for primary navigation between top-level surfaces — that's the sidebar.
Always have one selected tab. Tabs are never "all unselected".
Put 8+ tabs in a row. If you have that many sections, use a sidebar layout.
Related
For multi-aspect detail pages, see the Detail tabs pattern. For mutually-exclusive 2–4 options, prefer the Segmented control.