Avala Design
← Components/primitives

Toggle

Carbon's Toggle component. Distinct from Switch in spec: Toggle has inline ON / OFF text labels and is used for binary settings tied to a label (e.g. "Notifications: Enabled / Disabled"). Switch is the compact iOS-style affordance.

primitivesstablea11y: untested2/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 { Toggle } from "@avala/design";

<Toggle>Toggle</Toggle>

All variants

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

primitives-toggle--defaultOpen in Storybook →

When to use

  • Form-style binary settings with an explicit label and on/off state text ("Notifications: Enabled / Disabled").
  • The default for any form row that flips a single boolean — Carbon's recommended shape.

When not to use

  • Compact settings rows where the label is rendered separately and "Off"/"On" text would be noise → use `Switch`.
  • Multi-state — use `Tabs` or ContentSwitcher pattern.
  • Multi-select — use `Checkbox`.