Components

Toggle

Two-state button (on/off). Variants default / outline; sizes sm/default/lg. When 'on', bg-accent + text-accent-foreground.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Toggle aria-label="Grid"><GridFour weight="light" className="size-4" /></Toggle>

When to use

  • Formatting toggles (bold, italic).
  • View mode switches (grid/list).

When not to use

  • Persistent settings — use Switch.
  • Groups of exclusive options — use ToggleGroup.

Usage

Do
  • Pair with an icon that matches the action (Eye / EyeSlash, List / GridFour).
Don't
  • Don't use for on/off application state — Switch is clearer for that.