Tab Bars

Tabs is a horizontal tab bar (built on Radix Tabs) for switching between sibling views inside one page or panel. The TabsList is the bar of triggers; each TabsTrigger reveals its matching TabsContent. Used as navigation, it lets a user move between related sections without leaving the page or changing the surrounding layout.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: tabs.tsx

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@beacon/design-system";

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings go here.</TabsContent>
  <TabsContent value="password">Password settings go here.</TabsContent>
</Tabs>

Parts

Part	Role
Tabs	Root container. Set the starting tab with defaultValue, or control it with value / onValueChange.
TabsList	The bar that holds the triggers.
TabsTrigger	A single tab button. Its value selects the matching content.
TabsContent	The panel shown when its value is active.

When to use

• Switching between sibling sections of a record (overview, history, settings) on one page.
• A small, fixed set of views that share the same surrounding layout.
• As an in-page tab bar; for the layout-focused tab pattern see Tab Views.

Do not use Tabs to page through a long result set; use Pagination instead.