navigation contract
Tabs
Switch between sibling views in the same scope. Keyboard-driven.
Variants
- underline
- Active tab marked by a 2px bottom border
- pill
- Active tab is a filled pill
- segmented
- iOS-style segmented control — equal-width
Sizes
- sm
- 32pt
- md
- 36pt
- lg
- 44pt — touch surfaces
Example
<Tabs value={tab} onValueChange={setTab}><TabsList><TabsTrigger value="overview">Overview</TabsTrigger>...</TabsList><TabsContent value="overview">...</TabsContent></Tabs>Usage rule
role="tablist" + role="tab" + role="tabpanel". Use Radix Tabs / equivalent.
The full Tabs contract has 5 more rules, plus the do-not patterns. Get the full recipe.