Tab Bar
Organize and navigate through content with Rothko UI's Tab Bar component. Create tabbed interfaces that allow users to switch between different sections or views, improving information organization and enhancing the user experience.
Usage
import { TabBar } from '@rothko-ui/ui';
- Example
- Code
- One
- Two
With Kind
- Example
- Code
- One
- Two
danger
info
primary
secondary
success
warning
Props
Name | Type | Default | Description |
---|---|---|---|
Name className | Type string | Default | Description Class name for custom styling |
Name initialTab | Type Key | Default | Description Initial selected tab key |
Name onSelect | Type (tab: Key) => void | Default | Description Callback function triggered when a tab is selected |
Name style | Type React.CSSProperties | Default | Description Inline style object |
Name tabs | Type ReadonlyArray<Tab<Key>> | Default | Description Array of tabs |
Name kind | Type RothkoKind | Default | Description Sets the font and border color semantically |