<!-- source-hash: 2e278b19202e7067419c145f3d6571fc -->
A customizable toggle button component built on Radix UI Toggle primitive with styled variants for different sizes and appearances.

## Key Components

- **`toggleVariants`** - CVA-powered style variants with size and variant options
- **`Toggle`** - Main toggle component with forwardRef support
- **Variant types**: `default`, `outline`
- **Size types**: `sm`, `default`, `lg`

## Usage Example

```typescript
import { Toggle } from "@/components/ui/toggle"
import { Bold, Italic } from "lucide-react"

function TextEditor() {
  return (
    <div className="flex gap-2">
      {/* Default toggle */}
      <Toggle>
        <Bold />
        Bold
      </Toggle>

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

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

      {/* Controlled state */}
      <Toggle 
        pressed={isBold}
        onPressedChange={setIsBold}
      >
        Controlled
      </Toggle>
    </div>
  )
}
```

The component automatically handles pressed/unpressed states, accessibility features, and keyboard navigation through the underlying Radix primitive.