Toggle
Pressable toggle button with variant and size options
Preview
Usage
import { Toggle } from "@/components/ui/toggle"
import { Bold } from "lucide-react"
{/* Default variant */}
<Toggle aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</Toggle>
{/* Outline variant */}
<Toggle variant="outline" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</Toggle>When pressed, the toggle switches to data-[state=on] with bg-primary styling. Supports variant ("default" or "outline") and size ("sm", "default", "lg").
Install
npx shadcn add @bonsai/toggle