Tab
A navigation component that organizes related content into multiple panels. Built on Base UI Tabs for keyboard navigation and ARIA patterns.
Preview
Design
Examples
Orientation
Controls the layout direction of the tab list.
| Value | Default | Description |
|---|---|---|
horizontal | ✓ | Tabs laid out in a row. For typical in-page tabs. |
vertical | Tabs laid out in a column. For sidebar-style navigation. |
Design
Guidelines
Tab count
Too many tabs make it harder to grasp content. Keep tabs between 2 and 6 when possible. For more options, consider a Dropdown or sidebar navigation.
Controlled vs Uncontrolled
Use value with onChange when syncing tab state with URL params or when tab changes trigger external actions (e.g. data fetch). For simple UI switching, defaultValue alone is enough.
Props
Props
Prop
Default
Type
tabs—
TabItem[]
value?—
string
defaultValue?—
string
onChange?—
(value: string) => void
intent?"primary""primary" | "secondary" | "success" | "warning" | "danger" | "neutral"
orientation?"horizontal""horizontal" | "vertical"
Last updated on