ComponentClient component

Toggle

A two-state button with tactile default and outline treatments.

Installation

Preview

Usage

tsx

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

<Toggle aria-label="Toggle bold" variant="outline">
  <Bold />
</Toggle>

API reference

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	Controls the surrounding surface.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Controls the hit area and padding.
`pressed`	`boolean`	`—`	Controls the active state.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.