Toggle

A two-state button that can be on or off. For toolbars, see Toggle Group.

Basic

A pressed / unpressed control, often used for formatting.

Installation

CLI

npx @sonojs/ui@latest add toggle

Composition

structure

Toggle

Usage

toggle.tsx

import { BoldIcon } from "lucide-react"

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

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

Props

Prop	Type	Default	Description
pressed	boolean	—	Controlled pressed state.
defaultPressed	boolean	—	Uncontrolled initial pressed state.
onPressedChange	(pressed: boolean) => void	—	Called when pressed state changes.
variant	"default" · "outline"	"default"	Visual style.
size	"sm" · "default" · "lg"	"default"	Control height — `h-7` / `h-8` / `h-9`.
disabled	boolean	false	Disable the toggle.