{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "A tactile dashboard button with layered inset shadows. Primary, secondary, ghost and danger variants, icon sizes and a loading state.",
  "files": [
    {
      "path": "registry/dashboard/components/button/button.tsx",
      "content": "import { cn } from '@/lib/utils'\n\nconst variants = {\n  primary:\n    'bg-primary text-primary-foreground shadow-(--shadow-button-primary) hover:bg-primary/90',\n  secondary: 'bg-card text-foreground shadow-(--shadow-button) hover:bg-muted',\n  ghost: 'text-muted-foreground hover:bg-muted hover:text-foreground',\n  danger: 'bg-card text-destructive shadow-(--shadow-button) hover:bg-destructive/10',\n}\n\nconst sizes = {\n  sm: 'h-7 px-2.5 text-xs',\n  md: 'h-8 px-3 text-sm',\n  lg: 'h-10 px-4 text-sm',\n  icon: 'size-8',\n  'icon-sm': 'size-7',\n}\n\nexport type ButtonProps = {\n  as?: React.ElementType\n  href?: string\n  variant?: keyof typeof variants\n  size?: keyof typeof sizes\n  loading?: boolean\n} & React.ButtonHTMLAttributes<HTMLButtonElement>\n\nexport function Button({\n  as,\n  href,\n  variant = 'secondary',\n  size = 'md',\n  loading = false,\n  disabled,\n  className,\n  children,\n  ...props\n}: ButtonProps) {\n  const Tag = as ?? (href ? 'a' : 'button')\n\n  return (\n    <Tag\n      href={href}\n      type={Tag === 'button' ? (props.type ?? 'button') : undefined}\n      disabled={Tag === 'button' ? disabled || loading : undefined}\n      aria-busy={loading || undefined}\n      className={cn(\n        'inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg leading-none font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-150 outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0',\n        variants[variant],\n        sizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {loading && (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden className=\"animate-spin\">\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"9\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.25\"\n            strokeWidth=\"3\"\n          />\n          <path\n            d=\"M21 12a9 9 0 0 0-9-9\"\n            stroke=\"currentColor\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      )}\n      {children}\n    </Tag>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/button.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "shadow-button": "0 1px 2px rgb(0 0 0 / 0.05), 0 0 0 1px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.8)",
      "shadow-button-primary": "0 1px 2px rgb(0 0 0 / 0.2), 0 0 0 1px var(--primary), inset 0 1px 0 rgb(255 255 255 / 0.14)"
    },
    "dark": {
      "shadow-button": "0 0 0 1px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.06)",
      "shadow-button-primary": "0 1px 2px rgb(0 0 0 / 0.32), 0 0 0 1px rgb(255 255 255 / 0.9), inset 0 -2px 4px rgb(0 0 0 / 0.06)"
    }
  },
  "meta": {
    "scenario": "dashboard",
    "kind": "components"
  },
  "categories": [
    "dashboard",
    "buttons"
  ],
  "type": "registry:component"
}