Tabs

Parallel views, one visible at a time.

Default

## Release notes

Buena Mono **1.2** ships coding ligatures.

<Tabs defaultValue="write">
  <TabsList>
    <TabsTrigger value="write">Write</TabsTrigger>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="diff">Diff</TabsTrigger>
  </TabsList>
  <TabsContent value="write">…</TabsContent>
  <TabsContent value="preview">…</TabsContent>
  <TabsContent value="diff">…</TabsContent>
</Tabs>

Line, vertical, icons & disabled

Line-style tabs with icons; the locked tab is disabled.

Secondary-style tabs — a muted pill row; Bitbucket is disabled.

Secondary — geist's variant="secondary" muted treatment

Vertical tabs — the list stacks and the active marker runs down the side.

<Tabs defaultValue="write">
  <TabsList variant="line">
    <TabsTrigger value="write"><Pencil /> Write</TabsTrigger>
    <TabsTrigger value="locked" disabled><Lock /> Locked</TabsTrigger>
  </TabsList>
</Tabs>

<Tabs orientation="vertical">
  <TabsList>…</TabsList>
</Tabs>

Top: the variant="line" list (underline marker) with leading icons and a disabled tab. Middle: the Secondary variant — geist's variant="secondary" muted pill row (Bitbucket disabled). Bottom: orientation="vertical" stacks the triggers with a side marker.

Markdown for agents: /design/tabs.md · spec: /design.md