Tabs
Preview
index.tsxContent 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Preview
index.tsxContent for tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Alternative
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Design Tokens for Tabs
| Token | Color for | State/Meaning |
|---|---|---|
--par-color-bg-tab-item-enabled | Tab background | Default/Enabled |
--par-color-bg-tab-item-hovered | Tab background | Hovered |
--par-color-bg-tab-item-neutral-active | Tab background | Active/Selected (neutral) |
--par-color-bg-tab-item-accent-active | Tab background | Active/Selected (accent) |
--par-color-bg-tab-item-disabled | Tab background | Disabled |
--par-color-border-tab-container | Tabs border | Any |
--par-color-text-tab-item-enabled | Tab text | Default/Enabled |
--par-color-text-tab-item-hovered | Tab text | Hovered |
--par-color-text-tab-item-neutral-active | Tab text | Active/Selected (neutral) |
--par-color-text-tab-item-accent-active | Tab text | Active/Selected (accent) |
--par-color-text-tab-item-disabled | Tab text | Disabled |
Tabs API Reference
<Tabs />
| Prop | Type | Default | Description |
|---|---|---|---|
| data | array of TabItemProps | List of tab items | |
| size | 'sm' | 'md' | 'md' | Tabs size |
| color | 'neutral' | 'accent' | 'neutral' | Tabs color |
| theme | 'default' | 'alternative' | 'default' | Tabs theme |
| side | 'left' | 'right' | 'top' | 'bottom' | 'left' | Tabs position |
| flipped | boolean | false | Flip tab border position |
| indicatorSide | 'same' | 'opposite' | 'same' | Indicator side relative to border |
| navProps | HTMLDivElement props | Props for nav container | |
| bodyProps | HTMLDivElement props | Props for body container | |
| scrollValue | object ({ value: number, duration: number }) | { value: 4, duration: 1 } | Scroll config for nav |
| ...divProps | HTMLDivElement props | All native div props (className, style, ...) |