Layout UI

Toggle

A two-state button that switches between pressed and unpressed. Built on Base UI Toggle with default and outline variants.

Preview

Installation

bash
npx shadcn@latest add @layout/toggle

Usage

tsx
import { Toggle } from "@/components/ui/toggle"

Examples

Outline variant

Sizes

With text and pressed by default

Guidelines for AI agents

Use for toolbar actions that can be on or off (bold, italic, grid view). Always provide aria-label for icon-only toggles. Use ToggleGroup when multiple toggles are mutually related.

Never

  • Neveruse Toggle as a navigation link; use Button with variant link instead
  • Neverhardcode the pressed background; it derives from --layout-accent
  • Nevermix default and outline variants within the same toolbar
  • Neveromit aria-label on icon-only toggles

Tokens consumed

--layout-accent--layout-accent-fg--layout-muted--layout-muted-fg--layout-input--layout-ring--layout-radius--layout-duration-base