Skip to content
Borneo Design System

Tabs

Stable

Switch between sibling views inside one page, without navigating. Tabs work when the sections are alternatives — if someone needs to compare them, they should be on the page at once instead.

Added in v1.1.0 · import from "@borneo/react"

Interactive previewPermalink to this section

Arrow keys move between tabs and activate them as you go — the standard tabs pattern, handled by Radix.

Twelve pages, four contributors, deployed two hours ago.

Variant
tabs-preview.tsx
<Tabs defaultValue="overview">
  <TabsList variant="underline">
    <TabsTrigger variant="underline" value="overview">Overview</TabsTrigger>
    <TabsTrigger variant="underline" value="activity">Activity</TabsTrigger>
    <TabsTrigger variant="underline" value="settings">Settings</TabsTrigger>
  </TabsList>

  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="activity">…</TabsContent>
  <TabsContent value="settings">…</TabsContent>
</Tabs>

AnatomyPermalink to this section

The panel for the selected tab.

VariantsPermalink to this section

Underline tabs sit at the top of a page or a large section. Solid tabs switch a view inside a panel, where an underline would compete with the surrounding structure.

Underline

Page and section level

Solid

Inside a panel

StatesPermalink to this section

A disabled tab is skipped by the arrow keys rather than focused and refused.

Selected tab — brand underline, foreground label.

Related components