Tabs
Organize and navigate through content with rothko ui's Tabs component. Create tabbed interfaces that allow users to switch between different sections or views, improving information organization and enhancing the user experience.
Import
- Global
- Single
import { Tabs, Tab } from '@rothko-ui/react';
Usage
- Example
- Code
- One
- Two
With Kind
- Example
- Code
- One
- Two
primary
secondary
success
danger
warning
info
Props
Tabs Props
| Name | Type | Default | Description |
|---|---|---|---|
Name children | Type ReadonlyArray<ReactElement<TabProps>> | Default | Description The tabs to display |
Name className | Type string | Default | Description CSS class name(s) |
Name initialTab | Type string | Default | Description The initial tab to display |
Name kind | Type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | Default | Description The tab bar's semantic style |
Name onSelect | Type (tab: string) => void | Default | Description The callback function to be called when a tab is selected |
Name style | Type CSSProperties | Default | Description The inline style for the tabs |
Name styles | Type Object<StyleableComponents, React.CSSProperties> | Default | Description Additional inline styles for the tabs |
Tab Props
| Name | Type | Default | Description |
|---|---|---|---|
Name $key | Type string | Default | Description The key of the tab |
Name children | Type ReactNode | Default | Description The content of the tab |
Name className | Type string | Default | Description CSS class name(s) |
Name leftIcon | Type ReactElement | Default | Description The icon to display on the left side of the tab |
Name rightIcon | Type ReactElement | Default | Description The icon to display on the right side of the tab |
Name style | Type CSSProperties | Default | Description The inline style for the tab |
Name title | Type string | Default | Description The title of the tab |