ComponentsTabs

Tabs

Switch between sections with optional scroll arrows, icons beside labels, and a disabled state—documented in one interactive playground.

Switch between sections. Turn on overflow for scroll arrows when tabs are cramped, add an icon beside each label, or disable the whole bar.

Active tab

Overflow

Show icons

Disabled

Code preview

import { TabsBar } from "./TabsBar";

Color tokens for tab labels, icons, and underlines.

Token	Value	Color	Usage
Active underline	`var(--lavender-500)`	`#765cd8`	Highlight for the open section
Container divider	`var(--border-subtle)`	`#e2e2e2`	Shared bottom border for the tab row
Active label	`var(--lavender-700)`	`#463781`	Text color for the open section
Inactive label	`var(--text-body-default)`	`#3d535e`	Text color for sections that are not open