Tabs
ProTab navigation for organising content into switchable panels. Two style variants: Underline tabs for page-level navigation with a bottom border indicator, and Pill tabs for inline section switching with a filled background indicator.
12 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Line | ||
| Pill | Pill-shaped tabs with a filled background indicator. | Use for inline content switching within a card or panel. |
| Enclosed |
Usage Guidelines
Do
Keep tab labels short — one or two words maximum.
Don't
Use tabs for sequential steps — use a Stepper instead.
Do
Show the first tab as active by default.
Don't
Mix Underline and Pill styles in the same interface.
Do
Use Underline for page-level navigation, Pill for inline switching.
Don't
Place more than 6 tabs — consider a different navigation pattern.
Code
Design Tokens
Accessibility
- Uses role="tablist", role="tab", and role="tabpanel" pattern.
- Active tab has aria-selected="true".
- Each tab has aria-controls pointing to its associated panel.
- Panels have aria-labelledby pointing back to their tab.