Toggle

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

import { BoldIcon, BookmarkIcon, ItalicIcon } from "lucide-react"

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

export function ToggleDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle aria-label="Toggle italic" defaultPressed>
        <ItalicIcon />
      </Toggle>
      <Toggle defaultPressed>
        <BookmarkIcon data-icon="inline-start" />
        Bookmark
      </Toggle>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/toggle.json

Usage

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

<Toggle>Toggle</Toggle>

Examples

Outline

import { BoldIcon, BookmarkIcon, ItalicIcon } from "lucide-react"

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

export function ToggleOutline() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle italic" defaultPressed>
        <ItalicIcon />
      </Toggle>
      <Toggle variant="outline">
        <BookmarkIcon data-icon="inline-start" />
        Bookmark
      </Toggle>
    </div>
  )
}

Sizes

import { UnderlineIcon } from "lucide-react"

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

export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle size="sm" variant="outline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle underline" defaultPressed>
        <UnderlineIcon />
      </Toggle>
      <Toggle size="lg" variant="outline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </div>
  )
}

Disabled

import { BoldIcon, ItalicIcon } from "lucide-react"

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

export function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle bold" disabled>
        <BoldIcon />
      </Toggle>
      <Toggle
        variant="outline"
        aria-label="Toggle italic"
        disabled
        defaultPressed
      >
        <ItalicIcon />
      </Toggle>
    </div>
  )
}