Primitive
Tabs
A tab list with a sliding underline.
States
Default
What it may do, and what it must ask about.
Small
What it may do, and what it must ask about.
With badges
What it may do, and what it must ask about.
Route navigation
When to use
- Switching between views of the same thing: Contract and Activity.
When not to
- For unrelated destinations; use the app navigation.
- For more than five items.
Props
| Name | Type | Notes |
|---|---|---|
| tabs / value / onChange / label / size | label names the tab list for assistive tech. For route navigation, give every item href and omit value/onChange; selection comes from the current pathname. |
* required
Accessibility invariants
- Local views use role=tablist with roving tabindex; arrow keys, Home and End move.
- Route items render real links inside a named nav, with aria-current=page for the active route.
Agent instructions
For anything generating UI from this system
Keep labels to one or two words. For routes, give every item href and omit value/onChange. For local views, provide value/onChange and pair with TabPanel. Never mix links and local tabs in one list.