Active tab
Overflow
Show icons
Code preview
import { TabsBar } from "./TabsBar";
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.
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 |