Tab
Tabs make it easy to explore and switch between different views.
Overview
- size
- medium · small · tiny
- Toggles
- isSelected
All options
Size and selection
Outside a TabsContainer a selected tab draws its own background.
| size \ isSelected | unselected | selected |
|---|---|---|
| medium | Tab | Tab |
| small | Tab | Tab |
| tiny | Tab | Tab |
Icons
decoIcon adds a leading icon; actionIcon adds a trailing icon with its own click handler.
| icon \ size | medium | small | tiny |
|---|---|---|---|
| decoIcon | Tab | Tab | Tab |
| actionIcon | Tab | Tab | Tab |
| both | Tab | Tab | Tab |
Second label
| size \ isSelected | unselected | selected |
|---|---|---|
| medium | TabSecond | TabSecond |
| small | TabSecond | TabSecond |
| tiny | TabSecond | TabSecond |
Examples
Basic tabs
Option 1
Option 2
Option 3
Sizes in a container
Tabs come in medium (default), small and tiny. Inside a TabsContainer the selected pill slides to the new tab.
medium
Option one
Option two
Option three
small
Option one
Option two
Option three
tiny
Option one
Option two
Option three
With second label
Add a secondary text below the tab label for additional context (center aligned).
DashboardOverview
AnalyticsReports
SettingsConfigure
Accessibility
Keyboard
Focus a tab and use the arrow keys, Home or End to move between tabs. Enter or Space selects the focused tab. Inside a TabsContainer only the selected tab is in the Tab order.
Roles
Each tab has role="tab" and aria-selected reflecting isSelected. TabsContainer has role="tablist".
Props
RouterLike
| Prop | Type | Required | Description |
|---|---|---|---|
| push | (url: string) => void | Yes | — |
TabProps
| Prop | Type | Required | Description |
|---|---|---|---|
| label | string | Yes | — |
| secondLabel | string | No | — |
| href | string | No | — |
| isSelected | boolean | Yes | — |
| onClickTab | () => void | Yes | — |
| onClickActionIcon | any | No | — |
| decoIcon | string | No | — |
| actionIcon | string | No | — |
| router | RouterLike | No | — |
| size | 'medium' | 'small' | 'tiny' | No | — |