Toggle

A pressable toggle button built on Base UI's Toggle primitive. It supports two visual variants and three sizes via CVA, and uses aria-pressed to communicate state.

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

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  )
}

Anatomy

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

<Toggle>
  <BoldIcon />
</Toggle>

Examples

Default variant

<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>

Outline variant

<Toggle variant="outline" aria-label="Toggle italic">
  <ItalicIcon />
</Toggle>

With text

<Toggle>
  <ItalicIcon />
  Italic
</Toggle>

Sizes

<Toggle size="sm" aria-label="Small">
  <BoldIcon />
</Toggle>
<Toggle size="default" aria-label="Default">
  <BoldIcon />
</Toggle>
<Toggle size="lg" aria-label="Large">
  <BoldIcon />
</Toggle>

API Reference

Toggle

The toggle button component.

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	`"default"` has a transparent background. `"outline"` adds a border and shadow.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	The button size. `"sm"` is `h-8`, `"default"` is `h-9`, `"lg"` is `h-10`.
`pressed`	`boolean`	—	The controlled pressed state.
`defaultPressed`	`boolean`	—	The initial uncontrolled pressed state.
`onPressedChange`	`(pressed: boolean) => void`	—	Callback when the pressed state changes.
`disabled`	`boolean`	`false`	Whether the toggle is disabled.
`className`	`string`	—
`children`	`ReactNode`	—

Accepts all props from Base UI's Toggle.