Avala Design
← Components/patterns

ContentSwitcher

Carbon-spec ContentSwitcher. Two or more equal-weight options where exactly one is selected at a time. Visually distinct from Tabs (which implies a panel below). Wraps Radix ToggleGroup type="single".

patternsstablea11y: 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 { ContentSwitcher, ContentSwitcherItem } from "@avala/design";

<ContentSwitcher size="md" size="md">
  <ContentSwitcherItem />
</ContentSwitcher>

All variants

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

patterns-contentswitcher--defaultOpen in Storybook →

When to use

  • Two to four equal-weight options that swap a small content region (chart granularity: Day / Week / Month; view mode: Grid / List; theme: Light / Dark).
  • Dense surfaces where a tabs row would feel too heavy.

When not to use

  • More than ~4 options or longer labels → use `Tabs`.
  • Multi-select / filter chips → use `Tag` variant="selectable".
  • Bistable on/off control → use `Switch` or `Toggle`.