Toggle

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

import { Toggle } from "@/registry/optics/toggle";<Toggle aria-label="Toggle italic">	<Italic className="h-4 w-4" /></Toggle>

import { Toggle } from "@/registry/optics/toggle";<Toggle aria-label="Toggle italic">	<Italic className="h-4 w-4" /></Toggle>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/toggle.json

Name

Type

className

string

variant

"default" | "outline" (default: "default")

size

"default" | "sm" | "lg" (default: "default")

pressed

boolean

defaultPressed

boolean

onPressedChange

(pressed: boolean) => void

disabled

boolean