Overview
Tabs allow users to switch between related sections of content — all housed under a single view. They improve clarity and reduce clutter by organizing content into digestible chunks.
When to Use
- When multiple content sections need to share the same space
- When users must easily compare or switch between different views
- On pages with forms, settings, or filtered content (e.g., “All / Active / Archived”)
States
- Default: Unselected, idle state of a tab
- Active: The currently selected tab
- Hover: The tab being hovered over
- Disabled: A tab that is not interactive or currently available
Anatomy (Figma)
- <Tabs | Item>:Partial component. Can be configured to any of its available states.
- [Tabs]: Template component. Can be detached if needed to customize behavior or layout.
Look and feel
This template has been completely built with intentional tokens, giving the ability to display the right color scheme accordingly to the theme and mode where it is deployed.
Best Practice
- Keep link labels short and scannable
- Reserve right-aligned space for profile/actions if needed
- Keep alignment consistent (use design tokens)
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.