Installation
pnpm dlx shadcn@latest add @cortexcn/toggleUsage
import { Toggle, toggleVariants } from "@/components/toggle";Examples
Basic
import { Toggle } from "@/components/toggle"import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"export function ToggleBasic() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap items-center gap-2"> <Toggle aria-label="Toggle bold" defaultPressed> <BoldIcon /> </Toggle> <Toggle aria-label="Toggle italic"> <ItalicIcon /> </Toggle> <Toggle aria-label="Toggle underline"> <UnderlineIcon /> </Toggle> </div> </div> )}Outline
import { Toggle } from "@/components/toggle"import { BoldIcon, ItalicIcon } from "lucide-react"export function ToggleOutline() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap items-center gap-2"> <Toggle variant="outline" aria-label="Toggle italic"> <ItalicIcon data-icon="inline-start" /> Italic </Toggle> <Toggle variant="outline" aria-label="Toggle bold"> <BoldIcon data-icon="inline-start" /> Bold </Toggle> </div> </div> )}Sizes
import { Toggle } from "@/components/toggle"export function ToggleSizes() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap items-center gap-2"> <Toggle variant="outline" aria-label="Toggle small" size="sm"> Small </Toggle> <Toggle variant="outline" aria-label="Toggle default" size="default"> Default </Toggle> <Toggle variant="outline" aria-label="Toggle large" size="lg"> Large </Toggle> </div> </div> )}With button text
import { Button } from "@/components/button"import { Toggle } from "@/components/toggle"export function ToggleWithButtonText() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-col gap-4"> <div className="flex items-center gap-2"> <Button size="sm" variant="outline"> Button </Button> <Toggle variant="outline" aria-label="Toggle sm" size="sm"> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="default" variant="outline"> Button </Button> <Toggle variant="outline" aria-label="Toggle default" size="default"> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="lg" variant="outline"> Button </Button> <Toggle variant="outline" aria-label="Toggle lg" size="lg"> Toggle </Toggle> </div> </div> </div> )}With button icon
import { Button } from "@/components/button"import { Toggle } from "@/components/toggle"import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"export function ToggleWithButtonIcon() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-col gap-4"> <div className="flex items-center gap-2"> <Button variant="outline" size="icon-sm"> <BoldIcon /> </Button> <Toggle variant="outline" aria-label="Toggle sm icon" size="sm"> <BoldIcon /> </Toggle> </div> <div className="flex items-center gap-2"> <Button variant="outline" size="icon"> <ItalicIcon /> </Button> <Toggle variant="outline" aria-label="Toggle default icon" size="default" > <ItalicIcon /> </Toggle> </div> <div className="flex items-center gap-2"> <Button variant="outline" size="icon-lg"> <UnderlineIcon /> </Button> <Toggle variant="outline" aria-label="Toggle lg icon" size="lg"> <UnderlineIcon /> </Toggle> </div> </div> </div> )}With button icon and text
import { Button } from "@/components/button"import { Toggle } from "@/components/toggle"import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"export function ToggleWithButtonIconText() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-col gap-4"> <div className="flex items-center gap-2"> <Button size="sm" variant="outline"> <BoldIcon data-icon="inline-start" /> Button </Button> <Toggle variant="outline" aria-label="Toggle sm icon text" size="sm"> <BoldIcon data-icon="inline-start" /> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="default" variant="outline"> <ItalicIcon data-icon="inline-start" /> Button </Button> <Toggle variant="outline" aria-label="Toggle default icon text" size="default" > <ItalicIcon data-icon="inline-start" /> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="lg" variant="outline"> <UnderlineIcon data-icon="inline-start" /> Button </Button> <Toggle variant="outline" aria-label="Toggle lg icon text" size="lg"> <UnderlineIcon data-icon="inline-start" /> Toggle </Toggle> </div> </div> </div> )}Disabled
import { Toggle } from "@/components/toggle"export function ToggleDisabled() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap items-center gap-2"> <Toggle aria-label="Toggle disabled" disabled> Disabled </Toggle> <Toggle variant="outline" aria-label="Toggle disabled outline" disabled> Disabled </Toggle> </div> </div> )}With icon
import { Toggle } from "@/components/toggle"import { BookmarkIcon } from "lucide-react"export function ToggleWithIcon() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap items-center gap-2"> <Toggle aria-label="Toggle bookmark" defaultPressed> <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" /> </Toggle> <Toggle variant="outline" aria-label="Toggle bookmark outline"> <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" data-icon="inline-start" /> Bookmark </Toggle> </div> </div> )}Adapted from the shadcn/ui Toggle (MIT).