Tabs & icon toolbar

Tabs switch between views within a single page. Three variants: line (default, subtle border underline), contained (pill indicator on a gray track), and segmented (outlined pill with filled active button). IconToolbar is the companion pattern for icon-only formatting toolbars.

Line variant (default)

The canonical tab pattern for page-level navigation. Active indicator is a 2px bottom border in the inverse (near-black) color.

Overview content.

Show source

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="usage">Usage</TabsTrigger>
    <TabsTrigger value="api">API</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Content…</TabsContent>
</Tabs>

Contained variant

Pill indicator on a gray track. Good for compact secondary tabs inside a card or panel.

Show source

<Tabs defaultValue="week">
  <TabsList variant="contained">
    <TabsTrigger variant="contained" value="day">Day</TabsTrigger>
    <TabsTrigger variant="contained" value="week">Week</TabsTrigger>
    <TabsTrigger variant="contained" value="month">Month</TabsTrigger>
  </TabsList>
</Tabs>

Segmented variant

Outlined pill where the active button is filled with the warm-dark button token. Matches the segmented-action pattern from Figma DS v1.2 (node 15286:20494). Three sizes.

Show source

<Tabs defaultValue="b">
  <TabsList variant="segmented">
    <TabsTrigger variant="segmented" value="a">Action</TabsTrigger>
    <TabsTrigger variant="segmented" value="b">Action</TabsTrigger>
    <TabsTrigger variant="segmented" value="c">Action</TabsTrigger>
  </TabsList>
</Tabs>

IconToolbar — independent toggles (mode='multiple')

Formatting toolbar pattern: bold, italic, underline, etc. Each button toggles independently. Accessible via aria-pressed per button.

Show source

<IconToolbar aria-label="Text formatting" defaultValue={["bold"]}>
  <IconToolbarItem value="bold" aria-label="Bold">
    <Icon icon={Bold} size="sm" />
  </IconToolbarItem>
  <IconToolbarItem value="italic" aria-label="Italic">
    <Icon icon={Italic} size="sm" />
  </IconToolbarItem>
  <IconToolbarItem value="underline" aria-label="Underline">
    <Icon icon={Underline} size="sm" />
  </IconToolbarItem>
  <IconToolbarItem value="strike" aria-label="Strikethrough">
    <Icon icon={Strikethrough} size="sm" />
  </IconToolbarItem>
</IconToolbar>

IconToolbar — exclusive selection (mode='single')

Radio-like group for mutually-exclusive choices (e.g. text alignment). Emits aria-checked + role='radio' per item.

Show source

<IconToolbar aria-label="Text alignment" mode="single" defaultValue="left">
  <IconToolbarItem value="left" aria-label="Align left">
    <Icon icon={AlignLeft} size="sm" />
  </IconToolbarItem>
  <IconToolbarItem value="center" aria-label="Align center">
    <Icon icon={AlignCenter} size="sm" />
  </IconToolbarItem>
  <IconToolbarItem value="right" aria-label="Align right">
    <Icon icon={AlignRight} size="sm" />
  </IconToolbarItem>
</IconToolbar>

IconToolbar — disabled

Either the whole toolbar or an individual item can be disabled.

Show source

<IconToolbar aria-label="Formatting" disabled>…</IconToolbar>