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:

1. Default - The resting appearance of an unselected tab.
2. Hover :hover - The label turns primary over a subtle primary tint.
3. Focus :focus-visible - A rounded primary outline inset within the tab for keyboard users.
4. Selected - Primary label with a 3px primary bottom indicator.