Toggle

Demos

An icon toggle. Give it an aria-label.

"use client"

import { BookmarkIcon } from "lucide-react"

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

export function ToggleDemo() {
  return (
    <Toggle aria-label="Bookmark">
      <BookmarkIcon />
    </Toggle>
  )
}

Usage

Use a toggle for a two-state action on the current item, like bookmark or favourite. For a setting, use a Switch. For a one-off action, use a Button.

Import it from @workspace/ui/components/toggle.

Anatomy

Toggle — A button with aria-pressed. Pressed toggles get a muted background.

Notes

Icon-only toggles need an aria-label. Keep the label the same in both states. The pressed state is announced for you.
Put data-icon="inline-start" or data-icon="inline-end" on an icon next to text so the padding stays even.
toggleVariants is exported to style other elements like a toggle.

Examples

Outline

Set variant="outline" to show the edge when off.

"use client"

import { StarIcon } from "lucide-react"

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

export function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Favourite" defaultPressed>
      <StarIcon />
    </Toggle>
  )
}

Sizes

sm, default, and lg.

"use client"

import { BookmarkIcon } from "lucide-react"

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

export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Toggle variant="outline" size="sm" aria-label="Bookmark">
        <BookmarkIcon />
      </Toggle>
      <Toggle variant="outline" aria-label="Bookmark">
        <BookmarkIcon />
      </Toggle>
      <Toggle variant="outline" size="lg" aria-label="Bookmark">
        <BookmarkIcon />
      </Toggle>
    </div>
  )
}

With text

An icon and a label. Mark the icon with data-icon.

"use client"

import { BellIcon } from "lucide-react"

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

export function ToggleWithText() {
  return (
    <Toggle variant="outline">
      <BellIcon data-icon="inline-start" />
      Reminders
    </Toggle>
  )
}

Disabled

A toggle that cannot be pressed.

"use client"

import { BellOffIcon } from "lucide-react"

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

export function ToggleDisabled() {
  return (
    <Toggle variant="outline" disabled aria-label="Mute">
      <BellOffIcon />
    </Toggle>
  )
}

Controlled

Hold the state with pressed and onPressedChange.

Not bookmarked

"use client"

import * as React from "react"
import { BookmarkIcon } from "lucide-react"

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

export function ToggleControlled() {
  const [pressed, setPressed] = React.useState(false)

  return (
    <div className="flex flex-col items-center gap-3">
      <Toggle aria-label="Bookmark" pressed={pressed} onPressedChange={setPressed}>
        <BookmarkIcon />
      </Toggle>
      <p className="text-muted-foreground text-xs">
        {pressed ? "Bookmarked" : "Not bookmarked"}
      </p>
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Toggle

Prop	Type	Default	Description
`variant`	`"default" or "outline"`	`default`	Visual style.
`size`	`"sm", "default", or "lg"`	`default`	Height and padding.
`defaultPressed`	`boolean`	`false`	Pressed on first render.
`pressed`	`boolean`	—	Pressed state when controlled.
`onPressedChange`	`(pressed) => void`	—	Called when the state changes.
`disabled`	`boolean`	`false`	Blocks input and dims the toggle.