39:T10c9,

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

const Demo = () => (
  <div className="flex flex-wrap items-center gap-12">
    <Toggle size="sm" aria-label="Bold">
      Bold
    </Toggle>
    <Toggle variant="outline" size="sm" defaultPressed aria-label="Italic">
      Italic
    </Toggle>
  </div>
)

export default Demo

36:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$39"}}],"$L3a"]}] 3b:T2230,

"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 shrink-0 cursor-pointer items-center justify-center gap-x-8 rounded-full whitespace-nowrap text-text-tertiary transition-[color,background-color,scale] duration-150 ease-out outline-none select-none active:scale-[0.97] motion-reduce:active:scale-100 hover:text-text-primary focus-visible:ring-4 focus-visible:ring-blue-60/50 disabled:pointer-events-none disabled:text-text-disabled data-pressed:bg-glass-background-control data-pressed:text-text-primary data-pressed:shadow-glass-control data-pressed:backdrop-glass-thin [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-transparent hover:bg-background-primary-hover",
        outline:
          "shadow-inset-1 shadow-border-tertiary hover:bg-background-primary-hover",
      },
      size: {
        sm: "h-36 min-w-36 px-12 text-compact-bold",
        md: "h-44 min-w-44 px-16 text-body-bold",
        lg: "h-48 min-w-48 px-20 text-body-bold",
      },
    },
    defaultVariants: { variant: "default", size: "md" },
  }
)

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

export { Toggle, toggleVariants }

38:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3b"}}],"$L3c"]}]

Installation

Usage