{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "author": "Tori Bryan",
  "description": "Triggers an action or event on click.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/button.tsx",
      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring-subtle active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n        outline:\n          \"border-border bg-input-subtle hover:bg-input-subtle-hover hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary-hover aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive-subtle text-destructive hover:bg-destructive-subtle-hover focus-visible:border-destructive focus-visible:ring-destructive-ring\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        default:\n          \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        icon: \"size-9\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-primary-hover": "var(--primary-hover)",
      "color-secondary-hover": "var(--secondary-hover)",
      "color-destructive-subtle": "var(--destructive-subtle)",
      "color-destructive-subtle-hover": "var(--destructive-subtle-hover)",
      "color-destructive-ring": "var(--destructive-ring)",
      "color-input-subtle": "var(--input-subtle)",
      "color-input-subtle-hover": "var(--input-subtle-hover)",
      "color-ring-subtle": "var(--ring-subtle)",
      "text-color-destructive": "var(--destructive-text)",
      "background-color-destructive-subtle": "var(--destructive-subtle)",
      "border-color-destructive": "var(--destructive-border)"
    },
    "light": {
      "primary-hover": "color-mix(in oklch, var(--color-neutral-900) 80%, transparent)",
      "secondary-hover": "var(--color-neutral-200)",
      "destructive-subtle": "color-mix(in oklch, var(--color-red-700) 8%, transparent)",
      "destructive-subtle-hover": "color-mix(in oklch, var(--color-red-700) 16%, transparent)",
      "destructive-ring": "color-mix(in oklch, var(--color-red-700) 20%, transparent)",
      "input-subtle": "color-mix(in oklch, var(--color-neutral-200) 20%, transparent)",
      "input-subtle-hover": "color-mix(in oklch, var(--color-neutral-200) 50%, transparent)",
      "ring-subtle": "color-mix(in oklch, var(--color-neutral-400) 50%, transparent)",
      "destructive-text": "var(--destructive)",
      "destructive-border": "var(--destructive)"
    },
    "dark": {
      "primary-hover": "color-mix(in oklch, var(--color-neutral-50) 80%, transparent)",
      "secondary-hover": "var(--color-neutral-700)",
      "destructive-subtle": "color-mix(in oklch, var(--color-red-400) 20%, transparent)",
      "destructive-subtle-hover": "color-mix(in oklch, var(--color-red-400) 30%, transparent)",
      "destructive-ring": "color-mix(in oklch, var(--color-red-400) 40%, transparent)",
      "input-subtle": "oklch(1 0 0 / 5%)",
      "input-subtle-hover": "oklch(1 0 0 / 10%)",
      "ring-subtle": "color-mix(in oklch, var(--color-neutral-500) 50%, transparent)",
      "destructive-text": "var(--destructive)",
      "destructive-border": "var(--destructive)"
    }
  },
  "meta": {
    "tier": "base-components",
    "group": "Actions",
    "docs": "https://fibo.toribryan.com/?path=/docs/base-components-actions-button--docs"
  },
  "docs": "Docs and live examples: https://fibo.toribryan.com/?path=/docs/base-components-actions-button--docs",
  "categories": [
    "base-components",
    "actions"
  ],
  "type": "registry:ui"
}