Actions

Toggle

A button that stays pressed. For one on/off setting, such as bold, where a checkbox would feel like a form.

packages/design-system/components/ui/toggle.tsx

Examples

Default and outline

Sizes: sm, default, lg

With a label

Disabled

Anatomy

01Button with aria-pressed
02Icon or label
03Muted fill when pressed

Usage

import { Toggle } from "@repo/design-system/components/ui/toggle";

<Toggle aria-label="Bold" pressed={bold} onPressedChange={setBold}>
  <BoldIcon />
</Toggle>

Props

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	Outline adds a border so it reads as a control at rest.
size	"default" \| "sm" \| "lg"	"default"	36, 32 and 40px, at least square.
pressed / defaultPressed	boolean	none	Controlled or uncontrolled pressed state. Pressed fills with muted.
onPressedChange	(pressed: boolean, details) => void	none	Called when it is toggled.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Label icon-only toggles with aria-label.

Don't

Use it to trigger an action. A toggle holds a state.