Toggle
A two-state button that can be either on or off.
Loading…
"use client";import * as React from "react";import { MoonIcon, SunIcon } from "lucide-react";import { useTheme } from "next-themes";import { Toggle } from "@/components/ui/toggle";export default function ToggleDemo() { const { resolvedTheme, setTheme } = useTheme(); const [mounted, setMounted] = React.useState(false); React.useEffect(() => setMounted(true), []); const isDark = mounted && resolvedTheme === "dark"; return ( <Toggle variant="outline" aria-label="Toggle dark mode" pressed={isDark} onPressedChange={(pressed) => setTheme(pressed ? "dark" : "light")} > {isDark ? <MoonIcon /> : <SunIcon />} {isDark ? "Dark" : "Light"} </Toggle> );}Installation
npx shadcn@latest add @cortexcn/toggleInstall the following dependencies:
npm install radix-uiCopy and paste the following code into your project.
"use client";import * as React from "react";import { cva, type VariantProps } from "class-variance-authority";import { Toggle as TogglePrimitive } from "radix-ui";import { cn } from "@/lib/utils";const toggleVariants = cva( "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-transparent", outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground", }, size: { default: "h-9 min-w-9 px-2", sm: "h-8 min-w-8 px-1.5", lg: "h-10 min-w-10 px-2.5", }, }, defaultVariants: { variant: "default", size: "default", }, },);function Toggle({ className, variant, size, ...props}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) { return ( <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} /> );}export { Toggle, toggleVariants };Usage
import { Toggle } from "@/components/ui/toggle";<Toggle>Toggle</Toggle>Examples
Outline
Use variant="outline" for a bordered toggle.
Loading…
import { ItalicIcon } from "lucide-react";import { Toggle } from "@/components/ui/toggle";export default function ToggleOutline() { return ( <Toggle variant="outline" aria-label="Toggle italic"> <ItalicIcon /> </Toggle> );}With Text
Add a label next to the icon.
Loading…
import { ItalicIcon } from "lucide-react";import { Toggle } from "@/components/ui/toggle";export default function ToggleWithText() { return ( <Toggle aria-label="Toggle italic"> <ItalicIcon /> Italic </Toggle> );}Sizes
Use the size prop (sm, default, lg).
Loading…
import { BoldIcon } from "lucide-react";import { Toggle } from "@/components/ui/toggle";export default function ToggleSizes() { return ( <div className="flex items-center gap-2"> <Toggle size="sm" aria-label="Toggle small"> <BoldIcon /> </Toggle> <Toggle size="default" aria-label="Toggle default"> <BoldIcon /> </Toggle> <Toggle size="lg" aria-label="Toggle large"> <BoldIcon /> </Toggle> </div> );}Disabled
Loading…
import { UnderlineIcon } from "lucide-react";import { Toggle } from "@/components/ui/toggle";export default function ToggleDisabled() { return ( <Toggle disabled aria-label="Toggle underline"> <UnderlineIcon /> </Toggle> );}