Toggle.

import { BookmarkIcon } from "lucide-react";

import { Toggle } from "@/components/ui/toggle";

export default function ToggleDemo() {
  return (
    <div className="flex items-center gap-2">
      <Toggle aria-label="Bookmark site">
        <BookmarkIcon />
      </Toggle>
      <Toggle aria-label="Bookmark site (on)" defaultPressed>
        <BookmarkIcon />
      </Toggle>
      <Toggle aria-label="Bookmark site (disabled)" disabled>
        <BookmarkIcon />
      </Toggle>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add toggle

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/toggle. See Installation if your project is not set up yet.

Manually

1. Install the dependencies

   npm install radix-ui class-variance-authority

2. Copy the source into your project

   components/ui/toggle.tsx

   "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 shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent text-[13px] font-medium text-muted-foreground transition-[background-color,border-color,color] outline-none select-none hover:bg-secondary hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive data-[state=on]:bg-primary/12 data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     {
       variants: {
         variant: {
           default: "bg-transparent",
           outline: "border-input bg-transparent data-[state=on]:border-primary/60",
         },
         size: {
           default: "h-10 min-w-10 px-2.5",
           sm: "h-8 min-w-8 px-2 text-xs",
           lg: "h-12 min-w-12 px-3",
         },
       },
       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 };

3. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

import { Toggle } from "@/components/ui/toggle";

<Toggle aria-label="Bookmark site">
  <BookmarkIcon />
</Toggle>

Examples#

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

import { Toggle } from "@/components/ui/toggle";

export default function ToggleOutline() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Bold" defaultPressed>
        <BoldIcon />
      </Toggle>
      <Toggle variant="outline" aria-label="Italic">
        <ItalicIcon />
      </Toggle>
      <Toggle variant="outline" aria-label="Underline">
        <UnderlineIcon />
      </Toggle>
      <Toggle variant="outline" size="sm" aria-label="Bold, small">
        <BoldIcon />
      </Toggle>
      <Toggle variant="outline" size="lg" aria-label="Bold, large">
        <BoldIcon />
      </Toggle>
    </div>
  );
}

import { EyeIcon, WrapTextIcon } from "lucide-react";

import { Toggle } from "@/components/ui/toggle";

export default function ToggleText() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" defaultPressed>
        <EyeIcon />
        Live preview
      </Toggle>
      <Toggle variant="outline">
        <WrapTextIcon />
        Word wrap
      </Toggle>
    </div>
  );
}