Toggle

A toggle component built on top of Radix UI Toggle.

Installation

npx shadcn@latest add toggle

Usage

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

<Toggle>Bold</Toggle>

Examples

Default

import { Bold } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export default function ToggleDemo() {
return (
  <Toggle aria-label="Toggle bold">
    <Bold className="h-4 w-4" />
  </Toggle>
)
}

Outline

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export default function ToggleOutline() {
return (
  <Toggle variant="outline" aria-label="Toggle italic">
    <Italic className="h-4 w-4" />
  </Toggle>
)
}

With Text

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export default function ToggleWithText() {
return (
  <Toggle aria-label="Toggle italic">
    <Italic />
    Italic
  </Toggle>
)
}

Disabled

import { Underline } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export default function ToggleDisabled() {
return (
  <Toggle aria-label="Toggle underline" disabled>
    <Underline className="h-4 w-4" />
  </Toggle>
)
}

Size

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export default function ToggleSizes() {
return (
  <div className="flex items-center space-x-2">
    <Toggle size="sm" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
    <Toggle aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
    <Toggle size="lg" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
  </div>
)
}

Props

Toggle

Extends React.ComponentProps<typeof TogglePrimitive.Root>