Switch
Compact iOS-style on/off switch. Distinct from Toggle (which is the labeled form-field variant with explicit Off / On text). Switch is used as a row affordance, often with the label as a separate <label> adjacent to it.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Switch } from "@avala/design"; <Switch>Switch</Switch>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-switch--defaultOpen in Storybook →
When to use
- Binary on/off control inline within a row, where the label lives separately (e.g. settings list, table column visibility).
- Dense surfaces where Toggle's inline "Off" / "On" text would be visual noise.
When not to use
- Labeled form rows with explicit state text → use `Toggle`.
- Multi-state or single-of-many → use `RadioButton` or `Tabs`.
- Multi-of-many → use `Checkbox`.