Tabs
Component that lets the user conditionally render pages or JSX based on which
tab is active.
Import
Usage
Variants
Local Tabs
Local tabs are tabs that conditionally render small JSX Elements for which creating layouts
is an overkill. E.g. toggle between monthly or yearly plans to render the respective pricing cards.
Router Tabs
Router tabs are tabs used in layouts where the user can switch between different pages.
E.g. on a dashboard page switch between analytics, settings and an overview page.
Styling
Secondary
Tertiary
Disabled
Props
Tabs
| Prop | Type | Default | Description |
|---|
type* | "local" | "router" | local | type of tabs |
initialTabId* | string | - | id of tab which should be active on first render |
styling | "primary" | "secondary" | "tertiary" | - | style type of the tabs |
children* | ReactNode | - | Expecting <Tabs.TabsList> and in case of local tabs also <Tabs.TabRender> |
Tabs.TabsList
| Prop | Type | Default | Description |
|---|
children* | ReactNode | - | Expecting <Tabs> |
Tab
| Prop | Type | Default | Description |
|---|
id* | string | - | identifies the respective tab |
disabled | boolean | false | Enables/disabled activation of tab |
children* | ReactNode | - | Expecting either <button> or <Link> |
Tabs.TabRender
| Prop | Type | Default | Description |
|---|
id* | string | - | identifies the respective tab |
children* | ReactNode | - | Expecting the component to render when the tab of the given id is active |
*: mandatory props
