Tabs
The tabs component is a simple way to organize content into different sections.
Examples
Blocks
This component is used in the following Blocks:
Theme
This component uses the following default theme:
- root{}(3 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
Tabs
| Prop | Description | Default |
|---|---|---|
className | The class name to be added to the tabs.string | |
selectedIndex | The active index of the tabs.number | |
defaultIndex | The default index of the tabs. Default is 0.number | 0 |
direction | The direction of the tabs. Default is 'ltr'."ltr" | "rtl" | ltr |
style | The style to be added to the tabs.CSSProperties | |
variant | The variant of the tabs."primary" | "secondary" | primary |
size | The size of the tabs.string | medium |
onSelect | The callback to be called when a tab is selected.(index: number) => void | |
theme | Theme for the Tabs.TabsTheme |
TabList
| Prop | Description | Default |
|---|---|---|
id | The id of the tab list.
@privatestring | |
className | The class name to be added to the tab list.string | |
selectedIndex | The active index of the tabs.
@privatenumber | |
direction | The direction of the tabs. Default is 'ltr'.
@private"ltr" | "rtl" | |
onSelect | The callback to be called when a tab is selected.
@private(index: number) => void | |
variant | The variant of the tabs.
@private"primary" | "secondary" | primary |
size | The size of the tabs.
@privatestring | medium |
theme | Theme for the Tabs.TabsTheme |
Tab
| Prop | Description | Default |
|---|---|---|
id | The id of the tab list.
@privatestring | |
containerClassName | The class name to be added to the tab container.string | |
className | The class name to be added to the tab.string | |
disabled | The disabled state of the tab.
@privateboolean | |
selected | The selected state of the tab.
@privateboolean | |
onSelect | The callback to be called when the tab is selected.
@private() => void | |
size | The size of the tabs.
@privatestring | medium |
theme | Theme for the Tabs.TabsTheme |
TabPanel
| Prop | Description | Default |
|---|---|---|
className | The class name to be added to the tab panel.string | |
theme | Theme for the Tabs.TabsTheme |