Tabs
Our tab components help organize and navigate content within a limited space.
Interactive Tab Demo
Content for the live tab is displayed here.
Current Configuration: medium tab in active state.
Underline Tabs
Small
Content for Tab One
Medium (Default)
Active tab content is displayed here...
Large
Large tab content with more spacing...
Tab Sizing
Underline Tab Sizing
Small Underline
Padding: 8px 4px
Border: 2px bottom
Medium Underline
Padding: 12px 4px
Border: 2px bottom
Large Underline
Padding: 16px 4px
Border: 2px bottom
Usage Guidelines
Contained Tabs
Use for primary navigation within a section.
- • Clear visual hierarchy
- • Better for fewer tabs
- • Prominent selection state
Underline Tabs
Use for secondary navigation or filters.
- • Minimal visual weight
- • Good for many tabs
- • Subtle selection indicator
Tab States
Provide clear feedback for different states.
- • Active: highlighted
- • Hover: subtle highlight
- • Disabled: reduced opacity
Accessibility
Ensure tabs are accessible to all users.
- • Keyboard navigation
- • ARIA labels
- • Focus indicators
- • Screen reader support