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/aria/toggle.jsonnpx shadcn@latest add https://kit.dev/r/aria/toggle.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/toggle.jsonyarn shadcn@latest add https://kit.dev/r/aria/toggle.jsonInstall the following dependencies:
bun add react-aria-components tailwind-variantsnpm install react-aria-components tailwind-variantspnpm add react-aria-components tailwind-variantsyarn add react-aria-components tailwind-variantsCopy and paste the following code into your project.
"use client";
import type React from "react";
import {
type ToggleButtonProps,
ToggleButton as TogglePrimitive,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
export const toggleVariants = tv({
base: "cn-toggle cn-toggle-aria 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 defaultUpdate 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