Tabs
Tabs group related content into panels behind a horizontal list of triggers. The active tab is highlighted with the primary color and a bottom indicator, and the panel below shares the same bordered, rounded surface as cards and accordions.
States
When customizing your designs, consider all the different states that a tab trigger can have:
- Normal - The resting appearance of an unselected tab.
- Hover
:hover- The label turns primary over a subtle primary tint. - Focus
:focus-visible- A rounded primary outline inset within the tab for keyboard users. While a tab is focused, the ring replaces the selected tab's bottom indicator. - Selected - Primary label with a 3px primary bottom indicator.
Ensure that your designs account for all these states to provide a consistent and user-friendly experience.
Ready to build? See the Tabs component docs for props and usage examples.
Tabs can be found in the Figma Template in the Components page as the Tab component set and the assembled Tabs component.