Tabs

Storybook

Go to Story

Tabs

const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> = TabsPrimitive.Root;

Defined in: src/components/Tabs/Tabs.tsx:49

A tabs component for organizing content into multiple panels. Built on top of radix-ui Tabs.

Examples

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <p>Account settings</p>
  </TabsContent>
  <TabsContent value="password">
    <p>Password settings</p>
  </TabsContent>
</Tabs>

// Tabs as links
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account" asChild>
      <Link href="/account">Account</Link>
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <p>Account settings</p>
  </TabsContent>
</Tabs>

---

TabsList()

function TabsList(__namedParameters): Element;

Defined in: src/components/Tabs/Tabs.tsx:83

Container for Tab's triggers.

Parameters

Parameter	Type
__namedParameters	TabsListProps

Returns

Element

Example

<TabsList>
  <TabsTrigger value="account">Account</TabsTrigger>
  <TabsTrigger value="password">Password</TabsTrigger>
</TabsList>

---

TabsTrigger()

function TabsTrigger(__namedParameters): Element;

Defined in: src/components/Tabs/Tabs.tsx:100

Trigger for a single tab. Should be wrapped with TabsList`. Can be rendered as a link using asChild.

Parameters

Parameter	Type
__namedParameters	TabsTriggerProps & RefAttributes<HTMLButtonElement>

Returns

Element

---

TabsContent()

function TabsContent(__namedParameters): Element;

Defined in: src/components/Tabs/Tabs.tsx:120

Displays content of currently active tab. Only one tab can be active at once.

Parameters

Parameter	Type
__namedParameters	TabsContentProps & RefAttributes<HTMLDivElement>

Returns

Element