Tabs

segmented: a 6px track with the active tab filled in Colors/action/segment/active. icon: page-level tabs with a 20px icon and a soft gradient on the active tab.

Figma: 10 / Components / Tabs

Fundraisers and their donors.

Usage

Source: src/components/ui/tabs.tsx

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

<Tabs defaultValue='people'>
    <TabsList>
        <TabsTrigger value='people'>People</TabsTrigger>
        <TabsTrigger value='breakdown'>Breakdown</TabsTrigger>
    </TabsList>
    <TabsContent value='people'>…</TabsContent>
    <TabsContent value='breakdown'>…</TabsContent>
</Tabs>

Examples

With counts

Icon tabs

Page-level navigation between views.

When to use

When to reach for it, and when to use something else.

Use it for

Switching between two to four views of the same data.

Full-width segmented tabs inside drawers.

Avoid

Steps in a sequence.

More than five tabs; use a Select.

API reference

TabsList

Prop	Type	Default	Description
variant	'segmented' \| 'icon'	'segmented'	Visual style.
fullWidth	boolean	false	Tabs share the full width.

TabsTrigger

Prop	Type	Default	Description
value	string	–	Matches a TabsContent value.
count	ReactNode	–	A count after the label.
icon	ReactNode	–	A 20px icon before the label.

PreviousTable NextTextarea