'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navigation
Tabs
Switch between views of the same thing. Underline or pills, horizontal or vertical.
Ant Design: Tabs
import { Tabs, TabList, Tab, TabPanel } from '@alea/ui';
Examples
Tabs
The underline grows in with the accent gradient.
What it does
How it works
FAQ
Generates a full color system as Figma variables.
Pills
The segmented look, with icons.
Preview
Code
The live component.
Vertical
For settings pages.
General
Tokens
Export
Name and description.
Props
Tabs props
Switch between views. Arrow keys move between tabs; Home and End jump.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "underline" | "pills" | 'underline' | underline (default) or pills (the segmented look). |
TabList props
The row of tabs. Needs an aria-label when there is no visible heading for it.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Defines a string value that labels the current element. (React Aria) |
children | ReactNode | ((item: T) => ReactNode) | - | The contents of the collection. (React Aria) |
className | ClassNameOrFunction<TabsRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria) |
Tab props
One tab; its id matches a TabPanel.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Defines a string value that labels the current element. (React Aria) |
children | ChildrenOrFunction<DisclosureGroupRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. (React Aria) |
className | ClassNameOrFunction<TabsRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria) |
href | string | - | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). (React Aria) |
id | Key | - | The unique id of the tab. (React Aria) |
isDisabled | boolean | - | Whether the tab is disabled. (React Aria) |
onPress | ((e: PressEvent) => void) | - | Handler that is called when the press is released over the target. (React Aria) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria) |
target | HTMLAttributeAnchorTarget | - | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). (React Aria) |
TabPanel props
The content for the tab with the same id.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Defines a string value that labels the current element. (React Aria) |
children | ChildrenOrFunction<DisclosureGroupRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. (React Aria) |
className | ClassNameOrFunction<TabsRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria) |
id | Key | - | The unique id of the tab. (React Aria) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria) |
Accessibility
- Tab list, tabs and panels are wired with ARIA; the selected tab is the only tab stop.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Move between tabs |
| Home / End | First / last tab |
| Tab | Moves into the panel |
Do and don't
Do
- Keep tab labels short.
Don't
- Don't use tabs for steps in a process.