Avala Design
← Components/primitives

Tabs

Carbon-spec Tabs. Wraps Radix Tabs. Two visual variants: line — Carbon's default; underlined active tab. contained — Filled active tab; used in nested contexts.

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Tabs } from "@avala/design";

<Tabs variant="line" variant="line">Tabs</Tabs>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-tabs--defaultOpen in Storybook →

When to use

  • Switch between related sections within a single page (project tabs, settings sub-pages, dataset views).
  • 2-7 distinct content groups that share context.

When not to use

  • Top-level site navigation → use `NavigationMenu`.
  • Single-of-many input within a form → use `RadioButton` or ContentSwitcher pattern.
  • Sequential flows → use the ProgressIndicator pattern.
  • Long content sections that should remain accessible → use the Accordion pattern.