When to Use
- Organizing related content into switchable views without page navigation
- Reducing page length by grouping content into logical sections
- Providing tabbed navigation within a card, panel, or page section
Types
| Type | Description |
|---|---|
| Segmented | Pill-style tabs with filled active background, best for 2–5 items |
| Underline | Minimal underline indicator, best for 2–7 items |
| Underline Icon | Underline tabs with leading icons |
Best Practices
- Keep tab labels short (1–2 words)
- Don't nest tabs inside tabs
- Use Segmented for primary navigation, Underline for secondary contexts
- Maintain consistent tab count across similar UI patterns