Toggle

import { Bold } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/toggle.json

import { Toggle } from "@/components/ui/toggle"

<Toggle>Toggle</Toggle>

import { Italic } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

import { Italic } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

import { Underline } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	The toggle variant
`size`	`"default" \| "sm" \| "lg"`	`"default"`	The toggle size
`pressed`	`boolean`	-	Controlled pressed state
`defaultPressed`	`boolean`	`false`	Default pressed state
`onPressedChange`	`(pressed: boolean) => void`	-	Callback when pressed changes
`disabled`	`boolean`	`false`	Disable the toggle