Tabs
A row of tabs that switches between related views in the same place. The selected tab has a brand label and underline.
Master
Switch size and toggle expand and border. Click a tab or use the arrow keys.
Usage
Use Tabs to switch between two or more related views on one page, like the sections of a record or settings. One component: pass items with a label and, optionally, an icon, a count and content. With content, Tabs shows the selected panel under the strip; without it, it is a strip only and you show the view yourself from value and onChange. size sets the height (sm is the default); expand stretches the tabs across the row; border draws the line under the strip. For a small always-visible choice like density or a view switch, use Segmented. See contracts/tabs.json for the full contract.
Do's
- Sections of one record or page, like Overview / Invoices / Payments.
- Two to seven peer views that share the same context.
Don'ts
- Do not invent TabList, Tab, TabPanel, TabsTrigger or a local tab strip. It is one component.
- Do not use for app or page navigation. Use the side nav.
- Do not use for a small choice that applies at once, like density or List / Board. Use Segmented.
- Do not select more than one tab, and do not disable a tab to hide it. Leave it out instead.
- Do not use raw hex.
<Tabs
items={[
{ id: "overview", label: "Overview", content: "Balance, plan and the last five invoices." },
{ id: "invoices", label: "Invoices", count: 5, countLabel: "invoices", content: "Every invoice for this account, newest first." },
{ id: "payments", label: "Payments", content: "Payment methods and payment history." },
]}
label="Account sections"
size="sm"
/>