Toggle

A two-state button that can be either on or off.

Basic Toggle

With Text

Variants

Sizes

Disabled

Usage

import { Toggle } from "@/components/ui/toggle"
import { Bold } from "lucide-react"

<Toggle aria-label="Toggle bold">
  <Bold className="h-4 w-4" />
</Toggle>

{/* With text */}
<Toggle>
  <Bold className="h-4 w-4 mr-2" />
  Bold
</Toggle>

{/* Variants */}
<Toggle variant="outline">Outline</Toggle>

{/* Sizes */}
<Toggle size="sm">Small</Toggle>
<Toggle size="lg">Large</Toggle>