Components
Tab
Switches between views of the same page. Primary tabs are underlined, Secondary tabs are pills, Button tabs are small ghost buttons.
Playground
Content of Overview
Figma variant
Tab
Align=Left
Border Bottom=True
Tab Item
Type=Primary
Badge=False
Info=FalseTypes
All three types share the 40px height. The active Primary tab is underlined in primary; the active Secondary tab is primary soft; the active Button tab is pressed (surface/level-3). Hover is surface/level-2 with primary text.
Tokens
| Type | Item padding | Active | Hover |
|---|---|---|---|
| primary | --space-tiny --space-medium | --color-primary underline and text | --color-surface-level-2 inner box, --color-primary text |
| secondary | --space-micro + --space-micro --space-small | --color-primary-soft, --color-primary text | --color-surface-level-2, --color-primary text |
| button | --space-micro --space-medium + Button Small | --color-surface-level-3 | --color-surface-level-2 |
| border | — | --border-width --color-surface-level-3 | — |
Notes from Figma
- Primary hover draws a 12px-radius surface/level-2 box 4px inside the item; default and active items have no box. Code keeps this with an inner part.
- Secondary items are surface/level-1 pills even when inactive, so they disappear on a white page.
- Button items pad 16px on the sides around the button, so Button tabs sit 32px apart.
- The deprecated Tab and Tab Item sets are not built.
- Figma has no focus state; code adds the primary focus ring.
Figma to code
| Figma | React |
|---|---|
| Tab Item Type = Primary / Secondary / Button | variant='primary' / 'secondary' / 'button' |
| Tab Align = Left / Center / Right | align='start' / 'center' / 'end' |
| Tab Border Bottom | border |
| Tab 02 … Tab 07 | items.length |
| Tab Item Badge / Info / Disabled | { badge } / { info: true } / { disabled: true } |
| Tab Item Active / State=Hover | value / :hover |