DocsToggle
Toggle
A two-state button that can be either on or off.
Preview
Installation
npx shadcn@latest add toggleUsage
import { Toggle } from "@/components/ui/toggle"
import { Bold } from "lucide-react"
<Toggle aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</Toggle>Props
variant — "default" | "outline"
size — "default" | "sm" | "lg"
pressed — controlled pressed state
defaultPressed — initial pressed state (uncontrolled)
onPressedChange — callback fired on toggle
disabled — disables the toggle
On This Page