Build Assets
UI Component
Tabs
Horizontal navigation between related content sections within the same context.
Platform: bothTags: tabs, navigation, content-switching, filter
Purpose
Switches between related views or categories within the same page context. Use when: content is parallel, users need to compare across tabs, or switching tabs is non-destructive. Maximum 7 tabs (Hick's Law).
Anatomy
- Tab list: horizontal row, bottom border across full width
- Tab items: label (14px medium), optional icon (16px leading)
- Active indicator: 2–3px border-bottom in accent color, matches tab width
- Tab panel: content area below the tab list
States
- Default: grey text, no underline
- Active: dark text, accent underline
- Hover: darker text, subtle background
- Disabled: 40% opacity
- Loading: skeleton or spinner in the panel
Tokens
spacing
tabPadding: 10px 16pxindicatorHeight: 2pxtabGap: 0px
sizing
minTabWidth: 80px
Do
- Keep tab labels short — 1–2 words maximum
- Show count in badge when tab contains items: "Comments (3)"
- Preserve tab state on navigation — return to same tab when going back
- Limit to 7 tabs — beyond that use a dropdown or sidebar navigation
Don't
- Use tabs for sequential steps — use a stepper/wizard instead
- Nest tabs within tabs
- Use tabs if most users only ever view one tab
- Reload page data on every tab switch if data is shared
Accessibility
- role="tablist", role="tab", role="tabpanel"
- aria-selected="true" on active tab
- aria-controls links each tab to its panel
- Arrow keys navigate between tabs (left/right)
- Tab key moves focus into the active panel