║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Toggle description: A two-state button that can be either on or off. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-components-radix-toggle" />

Installation

<ComponentInstallation name="components-radix-toggle" />

Usage

<Toggle />

API Reference

Toggle

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/toggle#toggle" text="Animate UI API Reference - Toggle Primitive" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/toggle#root" text="Radix UI API Reference - Toggle.Root" />

</div>

<TypeTable type={{ variant: { description: 'The variant of the Toggle component.', type: '"default" | "outline"', required: false, }, size: { description: 'The size of the Toggle component.', type: '"default" | "sm" | "lg" | "icon"', required: false, }, }} />

<Callout type="info"> The `asChild` property is not supported in the `Toggle` component, as it is used for animation. </Callout>

Credits

• Radix UI Toggle
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║