Tabs
Switch between panels of content.
Horizontal
Use this to switch between views of the same content. This is the default orientation. The panels show below the list.
The overview panel.
Vertical
Set orientation="vertical" on Root. The list shows to the left of the panels. A disabled tab shows the disabled button style, and the user cannot select it.
The general panel.
Appearances
Use outline, the default, for tabs. Flat and raised are also available. The selected tab shows the pressed state. Set appearance and size on Root.
outline · defaultflatraised
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- For a marketing feature tour, use FeatureTabs. To go to another page, use links.
- Keep tab labels to text and icons. Do not put links or buttons in a tab.
API
Props that the library adds. Every part also takes all the Base UI props.
Tabs.Root
| Prop | Type | Default | Description |
|---|---|---|---|
| appearance | 'flat' | 'raised' | 'outline' | 'outline' | Sets the look of the tab list. It matches the ButtonGroup appearance. |
| size | 'sm' | 'md' | 'lg' | 'md' | Sets the height, padding, and text size of the tabs. |