Tabs
Tabs
Tabs provide a tabbed navigation panel for organizing content into separate panels with smooth transitions between active states.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Tab Height | 40-48px |
| Padding | 12-16px horizontal |
| Border Radius | 4-8px (top corners) |
| Active Color | #4f46e5 (indigo-600) |
| Font Weight | 400 (normal), 700 (active) |
| Border Bottom | 3px solid when active |
Style Variants
Section titled “Style Variants”Simple underline tabs with minimal styling
Card-style tabs with background fill on active state
Animated underline with smooth transitions
States
Section titled “States”| State | Appearance |
|---|---|
| Default | Grey text, no indicator |
| Hover | Slightly darker, pointer cursor |
| Active | Brand color, bottom border shown |
| Disabled | Grey with reduced opacity |
Alignment Options
Section titled “Alignment Options”| Alignment | Usage |
|---|---|
| Left | Default, tabs start from left |
| Center | Tabs centered in container |
| Right | Tabs aligned to right edge |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Organizing related content into sections
- Switching between different views
- Filtering content by category
- Progressive disclosure of information
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Use 2-5 tabs maximum | Use single tab (use content directly) |
| Keep labels short (1-2 words) | Use long tab labels |
| Order tabs logically | Random tab ordering |
| Show clear active state | Hide which tab is active |
| Ensure panel content relates to tab | Mismatch content and labels |