Toggle

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

inputs

button

toggle

state

Preview

Variants

Basic toggle component.

Code

TSX

import { Toggle } from "@/components/ui/toggle"
import { Bold } from "lucide-react"

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle>
  )
}

API Reference

Prop	Type	Default	Description
pressed	boolean	-	The controlled state of the toggle.
defaultPressed	boolean	-	The default state when initially rendered.
onPressedChange	function	-	Event handler called when the pressed state changes.
variant	default \| outline	default	The visual style of the toggle.
size	sm \| default \| lg	default	The size of the toggle.

View Full Documentation