{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A button with six variants, three sizes, a pill shape and a built-in loading state. Renders any element with asChild.",
  "dependencies": [
    "radix-ui",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/button.tsx",
      "content": "// Ballmac UI: Button. https://ui.ballmac.com/components/button\n// Based on shadcn/ui's Button (MIT, Copyright (c) 2023 shadcn), restyled and extended.\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,background-color,border-color,box-shadow,transform] duration-150 select-none active:translate-y-px disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:ring-destructive/30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-[inset_0_1px_0_0_rgb(255_255_255/0.12),0_1px_2px_0_rgb(0_0_0/0.12)] hover:bg-primary/90\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        outline:\n          \"border border-border bg-background shadow-xs hover:border-foreground/20 hover:bg-accent hover:text-accent-foreground\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        destructive: \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/40\",\n      },\n      size: {\n        sm: \"h-8 gap-1.5 px-3 text-[13px]\",\n        default: \"h-9 px-4\",\n        lg: \"h-11 px-6 text-[15px]\",\n        icon: \"size-9\",\n        \"icon-sm\": \"size-8\",\n      },\n      shape: {\n        default: \"\",\n        pill: \"rounded-full\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"default\", shape: \"default\" },\n  }\n)\n\ntype ButtonProps = React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    /** Render the child element (for example a link) with button styles. */\n    asChild?: boolean\n    /** Shows a spinner, sets aria-busy and blocks clicks. */\n    loading?: boolean\n  }\n\nfunction Button({\n  className,\n  variant,\n  size,\n  shape,\n  asChild = false,\n  loading = false,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      className={cn(buttonVariants({ variant, size, shape }), className)}\n      {...props}\n    >\n      {loading && !asChild ? (\n        <>\n          <span className=\"absolute inset-0 flex items-center justify-center\" aria-hidden=\"true\">\n            <svg className=\"size-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeOpacity=\"0.25\" strokeWidth=\"3\" />\n              <path d=\"M21 12a9 9 0 0 0-9-9\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n            </svg>\n          </span>\n          <span className=\"invisible inline-flex items-center gap-2\">{children}</span>\n        </>\n      ) : (\n        children\n      )}\n    </Comp>\n  )\n}\n\nexport { Button, buttonVariants, type ButtonProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/button.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "button",
      "cta",
      "loading",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "The base action control. Use variant for emphasis, size for density, and loading while an async action runs.",
      "whenToUse": [
        "Primary and secondary actions",
        "Form submit buttons",
        "Links that should look like buttons (asChild with <a>)"
      ],
      "whenNotToUse": [
        "Navigation inside running text (use a link)",
        "Toggling state (use a switch or toggle)"
      ],
      "composesWith": [
        "kbd",
        "tooltip"
      ],
      "a11y": [
        {
          "keys": "Enter / Space",
          "action": "Activates the button"
        },
        {
          "keys": "Tab",
          "action": "Moves focus to the button"
        }
      ],
      "customization": [
        "variant: default | secondary | outline | ghost | link | destructive",
        "size: sm | default | lg | icon | icon-sm",
        "shape: default | pill"
      ]
    },
    "source": {
      "name": "shadcn/ui Button",
      "url": "https://github.com/shadcn-ui/ui",
      "license": "MIT",
      "copyright": "Copyright (c) 2023 shadcn",
      "modified": true
    },
    "examples": [
      "button-demo",
      "button-variants",
      "button-loading"
    ],
    "url": "https://ui.ballmac.com/components/button"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}