Toggle

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

Installation

bash
npx shadcn@latest add toggle

Import

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

Default

<Toggle aria-label="Toggle bold">  <Bold className="h-4 w-4" /></Toggle>

Outline

<Toggle variant="outline" aria-label="Toggle italic">  <Italic className="h-4 w-4" /></Toggle>

With Text

<Toggle aria-label="Toggle italic">  <Italic className="h-4 w-4" />  Italic</Toggle>

Sizes

<Toggle size="sm">Small</Toggle><Toggle size="default">Default</Toggle><Toggle size="lg">Large</Toggle>

Controlled

const [pressed, setPressed] = React.useState(false)<Toggle pressed={pressed} onPressedChange={setPressed}>  Bold</Toggle>

Props

PROPTYPEDEFAULTDESCRIPTION
variant"default" | "outline""default"Visual style variant
size"sm" | "default" | "lg""default"Toggle size
pressedboolean—Controlled pressed state
defaultPressedbooleanfalseInitial pressed state (uncontrolled)
onPressedChange(pressed: boolean) => void—Called when pressed state changes
disabledbooleanfalseDisables the toggle