Components / Navigation
Tabs
stableSwitches between views that live at the same level of the hierarchy — never a substitute for real navigation.
Default
Showing all 128 transactions.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
tabs | { label: string; content: ReactNode }[] | — | Yes | Tabs to render, in order. |
defaultTab | string | — | No | Label of the tab active on first render — defaults to the first tab. |
Do
- Use for filtering or switching between different views of the same data (e.g. this very Preview/Code control).
- Keep labels to one or two words.
- Default to the tab a user is most likely to want first.
Don't
- Use tabs to hide a required step in a form — every field should be reachable without hunting.
- Put more than 5–6 tabs in one row before it needs an overflow pattern instead.