Overview
- Getting Started
- Loading States
- Forms
- Feature Flags
- Portal
- Show
- For
- Text
- Toggle
- Local Storage
Actions
- Button
- Icon Button
Communication
- Admonition
- Accordion
- Avatar
- Notifications
- Progress Indicators
- Tag
- Tooltip
Containment
- Confirm Modal
- Prompt Modal
- CTA Modal
- Modaldeprecated
- Dialog
- Table
Navigation
- Menu
- Tabs
Selection
- Drag & Drop
- Checkbox
- Date Picker
- Radio
- Rating
- Select
- Combobox
- Switch
Inputs
- Field
- Input
- Textarea
- Labeldeprecated
- Fieldset
- Field Messagedeprecated
- File Uploader
Hooks & Helpers
- split-props
- trap-focusdeprecated
- use-root-colors
- use-theme
- use-theme-context
- use-toggledeprecated
Tabs
Tabs organize content across different screens and views
1import { Tabs } from '@cerberus/react'Usage
The Tabs component is used to create a tabbed interface.
Palette
The palette prop can be used to change the color of the Tabs.
Primitives
You can utilize the primitive components to customize the tabs.
| Component | Description |
|---|---|
| TabsRoot | The context provider for the tabs parts |
| TabsList | The list container of the tabs |
| TabsTrigger | The tab components of the tabs |
| TabsIndicator | The indicator of the active tabs state |
| TabsContent | The panel container for the tabs. |
API
Props
The Tabs component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the tabs |
The Tabs.Root component also accepts all the props of the TabsRoot primitive props
Tabs component parts
The Tabs API is an Object containing the full family of abstracted components.
| Name | Description |
|---|---|
| Root | An abstraction of the TabsRoot. |
| List | An abstraction of the TabsList and TabsIndicator. |
| Tab | An abstraction of the TabsTrigger. |
| Panel | An abstraction of the TabsContent. |
Parts
The TabsParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The TabsRoot component which is the Provider for the family. |
| List | The TabsList component which is the container for the tabs. |
| Trigger | The TabsTrigger component which is the tab component. |
| Content | The TabsContent component which is the panel container. |
| Indicator | The TabsIndicator component which displays based on the active state. |
1import { Tabs } from '@cerberus/react'Usage
The Tabs component is used to create a tabbed interface.
Palette
The palette prop can be used to change the color of the Tabs.
Primitives
You can utilize the primitive components to customize the tabs.
| Component | Description |
|---|---|
| TabsRoot | The context provider for the tabs parts |
| TabsList | The list container of the tabs |
| TabsTrigger | The tab components of the tabs |
| TabsIndicator | The indicator of the active tabs state |
| TabsContent | The panel container for the tabs. |
API
Props
The Tabs component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the tabs |
The Tabs.Root component also accepts all the props of the TabsRoot primitive props
Tabs component parts
The Tabs API is an Object containing the full family of abstracted components.
| Name | Description |
|---|---|
| Root | An abstraction of the TabsRoot. |
| List | An abstraction of the TabsList and TabsIndicator. |
| Tab | An abstraction of the TabsTrigger. |
| Panel | An abstraction of the TabsContent. |
Parts
The TabsParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The TabsRoot component which is the Provider for the family. |
| List | The TabsList component which is the container for the tabs. |
| Trigger | The TabsTrigger component which is the tab component. |
| Content | The TabsContent component which is the panel container. |
| Indicator | The TabsIndicator component which displays based on the active state. |
1import { Tabs } from '@cerberus/react'Usage
The Tabs component is used to create a tabbed interface.
Palette
The palette prop can be used to change the color of the Tabs.
Primitives
You can utilize the primitive components to customize the tabs.
| Component | Description |
|---|---|
| TabsRoot | The context provider for the tabs parts |
| TabsList | The list container of the tabs |
| TabsTrigger | The tab components of the tabs |
| TabsIndicator | The indicator of the active tabs state |
| TabsContent | The panel container for the tabs. |
API
Props
The Tabs component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the tabs |
The Tabs.Root component also accepts all the props of the TabsRoot primitive props
Tabs component parts
The Tabs API is an Object containing the full family of abstracted components.
| Name | Description |
|---|---|
| Root | An abstraction of the TabsRoot. |
| List | An abstraction of the TabsList and TabsIndicator. |
| Tab | An abstraction of the TabsTrigger. |
| Panel | An abstraction of the TabsContent. |
Parts
The TabsParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The TabsRoot component which is the Provider for the family. |
| List | The TabsList component which is the container for the tabs. |
| Trigger | The TabsTrigger component which is the tab component. |
| Content | The TabsContent component which is the panel container. |
| Indicator | The TabsIndicator component which displays based on the active state. |
1import { Tabs } from '@cerberus/react'Usage
The Tabs component is used to create a tabbed interface.
Palette
The palette prop can be used to change the color of the Tabs.
Primitives
You can utilize the primitive components to customize the tabs.
| Component | Description |
|---|---|
| TabsRoot | The context provider for the tabs parts |
| TabsList | The list container of the tabs |
| TabsTrigger | The tab components of the tabs |
| TabsIndicator | The indicator of the active tabs state |
| TabsContent | The panel container for the tabs. |
API
Props
The Tabs component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the tabs |
The Tabs.Root component also accepts all the props of the TabsRoot primitive props
Tabs component parts
The Tabs API is an Object containing the full family of abstracted components.
| Name | Description |
|---|---|
| Root | An abstraction of the TabsRoot. |
| List | An abstraction of the TabsList and TabsIndicator. |
| Tab | An abstraction of the TabsTrigger. |
| Panel | An abstraction of the TabsContent. |
Parts
The TabsParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The TabsRoot component which is the Provider for the family. |
| List | The TabsList component which is the container for the tabs. |
| Trigger | The TabsTrigger component which is the tab component. |
| Content | The TabsContent component which is the panel container. |
| Indicator | The TabsIndicator component which displays based on the active state. |