Toggle

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

Installation

Add the toggle component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/toggle.json

Usage

import { BoldIcon } from "lucide-react"

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

<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>

Examples

Default

Code

import { BoldIcon } from "lucide-react"

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

<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>