Toggle

Displays a control to toggle between two states.

Docs
toggle-demo.tsx
import { PinIcon } from "lucide-react"
 
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleDemo() {
	return (
		<Toggle aria-label="Pin">
			<PinIcon />
		</Toggle>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/toggle

Usage

Imports
import { Toggle } from "@/components/ui/toggle"
Anatomy
<Toggle />

Examples

Sizes

toggle-sizes.tsx
import { PinIcon } from "lucide-react"
 
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleSizes() {
	return (
		<div className="flex items-center gap-4">
			<Toggle aria-label="Pin" size="sm">
				<PinIcon />
			</Toggle>
			<Toggle aria-label="Pin" size="md">
				<PinIcon />
			</Toggle>
			<Toggle aria-label="Pin" size="lg">
				<PinIcon />
			</Toggle>
		</div>
	)
}

Custom Control

toggle-custom-control.tsx
"use client"
 
import { useState } from "react"
import { PinIcon, PinOffIcon } from "lucide-react"
 
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleCustomControl() {
	const [isPinned, setIsPinned] = useState(false)
 
	return (
		<Toggle aria-label="Pin" pressed={isPinned} onPressedChange={setIsPinned}>
			{isPinned ? <PinIcon /> : <PinOffIcon />}
		</Toggle>
	)
}

Disabled

toggle-disabled.tsx
import { PinIcon } from "lucide-react"
 
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleDisabled() {
	return (
		<Toggle aria-label="Pin" disabled>
			<PinIcon />
		</Toggle>
	)
}