Tabs
Tabs organize content across different screens and views
- Use tabs to group content into helpful categories
- Tabs can horizontally scroll, so a UI can have as many tabs as needed
- Tabs have two color palettes: action and secondary-action
- Place tabs next to each other as peers
Example
Overview content
Features content
Pricing content
Overview content
Features content
Pricing content
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
import { Tabs, TabsList, Tab, TabPanel } from '@cerberus/react'Usage
Overview content
Features content
Pricing content
Palette
The palette prop can be used to change the color of the Tabs.
Overview content
Features content
Pricing content
Cached Tabs
The cache prop can be used to cache the active state of the Tabs in local storage.
Overview content
Features content
Pricing content
Customization
A peaceful and quiet region of the underworld.
A paradise for the souls of the heroic and the virtuous.
A deep abyss used as a dungeon of torment and suffering.
API
Tabs
| Name | Default | Description |
|---|---|---|
| cache | false | Whether to cache the active state of the tabs. |
| defaultValue | The initial value of the tabs when it is first rendered. Use when you do not need to control the state of the tabs. | |
| deselectable | false | Whether the active tab can be deselected. |
| id | A unique identifier of the machine. | |
| ids | TabsIDs interface | |
| lazyMount | false | Whether to enable lazy mounting. |
| palette | action | The color palette to use for the Tabs. |
| unmountOnExit | false | Whether to unmount on exit. |
| uuid | A unique id to use when caching a single group of tabs. |
TabsIDs
interface TabsIDs { root?: string tabList?: string trigger?: string control?: string indicator?: string}Tab
| Name | Default | Description |
|---|---|---|
| value | The value of the tab | |
| disabled | false | Whether the tab is disabled. |
| asChild | Use the provided child element as the default rendered element, combining their props and behavior. |
TabPanel
| Name | Default | Description |
|---|---|---|
| value | The Tab value identifier the panel is associated with. |
On this page
Use Cases
- Users should be able to:
- Use a keyboard to navigate between tabs
- Tab between the active tab and the tab panel
- Not see animations if they have motion sensitivity
Avoid applying density to tabs
Don't apply density to tabs by default — this lowers their targets below our best practice of 48x48 CSS pixels. Instead, give people a way to choose a higher density, like selecting a denser layout or changing the theme.
To ensure that this density setting can be easily reverted when it's active, keep all the targets to change it at minimum 48x48 CSS pixels each.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Navigate between the active tab and the active tab panel. |
| Space / Enter | Actives the currently focused Tab. |
| Arrows | Navigate between the tabs. |
On this page