Components
Tabs
A set of layered sections of content known as tab panels that are displayed one at a time.
Basic Usage
Tabs organize content into multiple sections and allow users to navigate between them.
Account SettingsMake changes to your account here. Click save when you're done.
Account SettingsMake changes to your account here. Click save when you're done.
import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from "@epilot/volt-ui"
<Tabs variant="highlight" defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account <Badge size="sm">1</Badge></TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="account"></TabsContent>
<TabsContent value="password"></TabsContent>
<TabsContent value="settings"></TabsContent>
</Tabs>Orientation
Tabs can be displayed in a vertical orientation.
Account SettingsMake changes to your account here. Click save when you're done.
import { Tabs, TabsList, TabsTrigger, TabsContentm } from "@epilot/volt-ui"
<Tabs defaultValue="account" orientation="vertical">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="account"></TabsContent>
<TabsContent value="password"></TabsContent>
<TabsContent value="settings"></TabsContent>
</Tabs>API Reference
Tabs
The root component that wraps the tabs list and content panels.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | - | The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs. |
value | string | - | The controlled value of the tab to activate. Should be used with onValueChange. |
onValueChange | (value: string) => void | - | Event handler called when the value changes. |
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the component. |
size | "sm" | "base" | "lg" | "base" | The size of the tabs triggers. |
variant | "default" | "highlight" | "default" | The variant of the tabs. |
TabsList
Contains the triggers that activate each tab panel.
| Prop | Type | Default | Description |
|---|---|---|---|
loop | boolean | true | When true, keyboard navigation will loop from last tab to first, and vice versa. |
className | string | - | Additional CSS classes to apply. |
TabsTrigger
The button that activates its associated content panel.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | A unique value that associates the trigger with a content panel. |
disabled | boolean | false | When true, prevents the user from interacting with the tab. |
className | string | - | Additional CSS classes to apply. |
TabsContent
Contains the content associated with each trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | A unique value that associates the content with a trigger. |
className | string | - | Additional CSS classes to apply. |