28:I[46246,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"Separator"] 29:I[48815,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"default"] 2a:I[55975,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"Toc"] 2b:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"Tabs"] 2c:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"TabsList"] 2d:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"TabsTrigger"] 2e:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"TabsContent"] 30:I[69317,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"CopyButton"] 21:["$","th",null,{"className":"px-3 py-2 align-top w-px whitespace-nowrap font-semibold text-3xs text-phosphor-dim uppercase tracking-terminal-lg","scope":"col","children":"Prop"}] 22:["$","th",null,{"className":"px-3 py-2 align-top w-full font-semibold text-3xs text-phosphor-dim uppercase tracking-terminal-lg","scope":"col","children":"Type"}] 23:["$","th",null,{"className":"px-3 py-2 align-top w-px whitespace-nowrap font-semibold text-3xs text-phosphor-dim uppercase tracking-terminal-lg","scope":"col","children":"Default"}] 24:["$","tbody",null,{"children":[["$","tr","variant",{"className":"border-line/60 border-b last:border-b-0","children":[["$","td",null,{"className":"px-3 py-2 align-top w-px whitespace-nowrap","children":["$","span",null,{"className":"text-phosphor","children":"variant"}]}],["$","td",null,{"className":"px-3 py-2 align-top w-full","children":["$","span",null,{"className":"text-muted-foreground","children":"\"default\" | \"outline\""}]}],["$","td",null,{"className":"px-3 py-2 align-top w-px whitespace-nowrap","children":["$","span",null,{"className":"text-phosphor-dim","children":"\"default\""}]}]]}],["$","tr","size",{"className":"border-line/60 border-b last:border-b-0","children":[["$","td",null,{"className":"px-3 py-2 align-top w-px whitespace-nowrap","children":["$","span",null,{"className":"text-phosphor","children":"size"}]}],["$","td",null,{"className":"px-3 py-2 align-top w-full","children":["$","span",null,{"className":"text-muted-foreground","children":"\"default\" | \"sm\" | \"lg\""}]}],["$","td",null,{"className":"px-3 py-2 align-top w-px whitespace-nowrap","children":["$","span",null,{"className":"text-phosphor-dim","children":"\"default\""}]}]]}]]}] 25:["$","p",null,{"className":"max-w-prose text-pretty text-muted-foreground text-sm","children":["Everything else is"," ",[["$","span","https://base-ui.com/react/components/toggle",{"children":[null,["$","a",null,{"className":"text-phosphor underline decoration-line-strong underline-offset-4 transition-colors hover:text-phosphor-bright","href":"https://base-ui.com/react/components/toggle","rel":"noopener","target":"_blank","children":"Base UI toggle"}]]}]],"'s API, documented there."]}] 26:["$","footer",null,{"className":"grid grid-cols-[minmax(0,1fr)] gap-4","children":[["$","$L28",null,{"className":"shrink-0 bg-line data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px","data-slot":"separator","orientation":"horizontal"}],["$","nav",null,{"className":"flex flex-wrap items-center justify-between gap-4","children":[["$","$L10",null,{"className":"flex items-center gap-2 font-mono text-muted-foreground text-xs outline-none transition-colors hover:text-phosphor focus-visible:text-phosphor","href":"/c/toast","children":[["$","$L29",null,{"ref":"$undefined","iconNode":[["path",{"d":"m15 18-6-6 6-6","key":"1wnfg3"}]],"className":"lucide-chevron-left size-3.5"}],"Toast"]}],["$","$L10",null,{"className":"flex items-center gap-2 font-mono text-muted-foreground text-xs outline-none transition-colors hover:text-phosphor focus-visible:text-phosphor","href":"/c/toggle-group","children":["Toggle Group",["$","$L29",null,{"ref":"$undefined","iconNode":[["path",{"d":"m9 18 6-6-6-6","key":"mthhwq"}]],"className":"lucide-chevron-right size-3.5"}]]}]]}]]}] 27:["$","div",null,{"className":"hidden w-52 shrink-0 xl:block","children":["$","$L2a",null,{"className":"sticky top-14 max-h-[calc(100svh-3.5rem)] overflow-y-auto py-10","entries":[{"id":"installation","label":"Installation"},{"id":"api-reference","label":"API Reference"}]}]}] 31:T23b6,

"use client";

import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-none border border-transparent font-mono font-semibold uppercase tracking-terminal outline-none transition-[color,background-color,border-color] duration-150 ease-terminal focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-phosphor-bright disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
  {
    defaultVariants: { size: "default", variant: "default" },
    variants: {
      size: {
        default: "h-9 min-w-9 px-2.5 text-2xs",
        lg: "h-10 min-w-10 px-3 text-1xs",
        sm: "h-8 min-w-8 px-2 text-3xs",
      },
      variant: {
        default:
          "text-muted-foreground hover:bg-accent/60 hover:text-phosphor data-pressed:bg-accent data-pressed:text-phosphor-bright",
        outline:
          "border-line text-muted-foreground hover:border-line-strong hover:text-phosphor data-pressed:border-phosphor data-pressed:bg-accent data-pressed:text-phosphor-bright",
      },
    },
  }
);

function Toggle({
  className,
  variant,
  size,
  ...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive
      className={cn(toggleVariants({ className, size, variant }))}
      data-slot="toggle"
      {...props}
    />
  );
}

export { Toggle, toggleVariants };

20:["$","$L2b",null,{"defaultValue":"command","children":[["$","$L2c",null,{"children":[["$","$L2d",null,{"value":"command","children":"Command"}],["$","$L2d",null,{"value":"manual","children":"Source"}]]}],["$","$L2e",null,{"className":"animate-none","value":"command","children":"$L2f"}],["$","$L2e",null,{"className":"animate-none pt-2","value":"manual","children":["$","ol",null,{"className":"relative grid grid-cols-[minmax(0,1fr)] gap-7 pl-7","data-slot":"steps","children":[["$","span",null,{"aria-hidden":"true","className":"absolute top-0 bottom-0 w-px bg-line left-[0.6875rem]"}],[["$","li",null,{"className":"relative grid grid-cols-[minmax(0,1fr)] gap-3","children":[["$","span",null,{"aria-hidden":"true","className":"-left-7 absolute top-0 grid size-[1.375rem] place-items-center border border-line bg-void font-bold font-mono text-2xs text-phosphor tabular-nums","children":1}],["$","p",null,{"className":"text-pretty text-foreground/85 text-sm","children":"Install the following dependencies."}],["$","figure",null,{"className":"border border-line bg-panel-sunken","data-slot":"code-block","children":[null,["$","div",null,{"className":"relative","children":[["$","div",null,{"className":"[&_pre]:!bg-transparent overflow-x-auto py-3.5 pr-12 pl-4 font-mono text-xs leading-relaxed [&_pre]:outline-none","dangerouslySetInnerHTML":{"__html":"

npm install @base-ui/react class-variance-authority

"}}],["$","$L30",null,{"className":"absolute top-2.5 right-2.5","label":"Copy the code","text":"npm install @base-ui/react class-variance-authority"}]]}]]}]]}],["$","li",null,{"className":"relative grid grid-cols-[minmax(0,1fr)] gap-3","children":[["$","span",null,{"aria-hidden":"true","className":"-left-7 absolute top-0 grid size-[1.375rem] place-items-center border border-line bg-void font-bold font-mono text-2xs text-phosphor tabular-nums","children":2}],["$","p",null,{"className":"text-pretty text-foreground/85 text-sm","children":"Copy the following into your project."}],["$","div",null,{"className":"grid grid-cols-[minmax(0,1fr)] gap-4","children":[["$","figure","components/ui/toggle.tsx",{"className":"border border-line bg-panel-sunken","data-slot":"code-block","children":[["$","figcaption",null,{"className":"border-line border-b px-3 py-2 font-mono text-2xs text-phosphor-dim tracking-terminal-xs","children":"components/ui/toggle.tsx"}],["$","div",null,{"className":"relative","children":[["$","div",null,{"className":"[&_pre]:!bg-transparent overflow-x-auto py-3.5 pr-12 pl-4 font-mono text-xs leading-relaxed [&_pre]:outline-none","dangerouslySetInnerHTML":{"__html":"$31"}}],"$L32"]}]]}]]}]]}],"$L33"]]}]}]]}]

Prop	Type	Default
variant	"default" \| "outline"	"default"
size	"default" \| "sm" \| "lg"	"default"