shadcn.io is not affiliated with official shadcn/ui
Shadcn Toggle for React
Two-state button that can be toggled on or off.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/toggle.jsonnpx shadcn@latest add https://kit.dev/r/radix/toggle.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/toggle.jsonyarn shadcn@latest add https://kit.dev/r/radix/toggle.jsonInstall the following dependencies:
bun add radix-ui tailwind-variantsnpm install radix-ui tailwind-variantspnpm add radix-ui tailwind-variantsyarn add radix-ui tailwind-variantsCopy and paste the following code into your project.
"use client";
import { Toggle as TogglePrimitive } from "radix-ui";
import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
export const toggleVariants = tv({
base: "cn-toggle group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
defaultVariants: {
size: "md",
variant: "default",
},
variants: {
// biome-ignore assist/source/useSortedKeys: size scale sm → lg; md maps to official default
size: {
sm: "cn-toggle-size-sm",
md: "cn-toggle-size-default",Update the import paths to match your project setup.
Usage
import { BookmarkIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
<BookmarkIcon
aria-hidden="true"
className="group-aria-pressed/toggle:fill-foreground"
/>
Bookmark
</Toggle>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
Demos
Outline
Use variant="outline" for an outline style.
Text
Toggle with an icon and text label.
Sizes
Use the size prop to change the size of the toggle.
Disabled
Disabled toggles in default and outline variants.
Rtl
Right-to-left toggle. See the RTL configuration guide for document direction.
API Reference
Toggle
PropType
AttributeType
ToggleIndicator
PropType
AttributeType