{
  "name": "button-loading",
  "kind": "component",
  "category": "button",
  "version": 1,
  "title": "Loading button",
  "description": "Swaps its icon for a spinner and sets aria-busy while an action runs, and stays focusable.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "requires": [],
  "files": [
    {
      "path": "components/button/button-loading.tsx",
      "content": "import { Button } from '@base-ui/react/button';\nimport { LoaderCircleIcon, SaveIcon } from 'lucide-react';\nimport * as React from 'react';\n\nexport default function ButtonLoading() {\n  const [loading, setLoading] = React.useState(false);\n\n  function save() {\n    setLoading(true);\n    setTimeout(() => setLoading(false), 1500);\n  }\n\n  return (\n    <Button\n      onClick={save}\n      disabled={loading}\n      focusableWhenDisabled\n      aria-busy={loading || undefined}\n      data-slot=\"button\"\n      className=\"group/button inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-primary bg-clip-padding px-2.5 text-sm font-medium whitespace-nowrap text-primary-foreground transition-all outline-none select-none hover:bg-primary/80 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n    >\n      {loading ? (\n        <LoaderCircleIcon aria-hidden=\"true\" data-icon=\"inline-start\" className=\"animate-spin\" />\n      ) : (\n        <SaveIcon aria-hidden=\"true\" data-icon=\"inline-start\" />\n      )}\n      Loading\n    </Button>\n  );\n}\n"
    }
  ],
  "styles": {
    "default": "button-default",
    "parts": {
      "Button": {
        "classes": [
          "group/button",
          "inline-flex",
          "h-8",
          "shrink-0",
          "items-center",
          "justify-center",
          "gap-1.5",
          "rounded-lg",
          "border",
          "border-transparent",
          "bg-primary",
          "bg-clip-padding",
          "px-2.5",
          "text-sm",
          "font-medium",
          "whitespace-nowrap",
          "text-primary-foreground",
          "transition-all",
          "outline-none",
          "select-none",
          "hover:bg-primary/80",
          "focus-visible:border-ring",
          "focus-visible:ring-3",
          "focus-visible:ring-ring/50",
          "active:not-aria-[haspopup]:translate-y-px",
          "has-data-[icon=inline-end]:pe-2",
          "has-data-[icon=inline-start]:ps-2",
          "aria-invalid:border-destructive",
          "aria-invalid:ring-3",
          "aria-invalid:ring-destructive/20",
          "data-disabled:pointer-events-none",
          "data-disabled:opacity-50",
          "dark:aria-invalid:border-destructive/50",
          "dark:aria-invalid:ring-destructive/40",
          "[&_svg]:pointer-events-none",
          "[&_svg]:shrink-0",
          "[&_svg:not([class*='size-'])]:size-4"
        ],
        "props": {
          "onClick": "save",
          "disabled": "loading",
          "focusableWhenDisabled": "true",
          "aria-busy": "loading || undefined",
          "data-slot": "\"button\""
        }
      },
      "LoaderCircleIcon": {
        "classes": [
          "animate-spin"
        ],
        "props": {
          "aria-hidden": "\"true\"",
          "data-icon": "\"inline-start\""
        }
      }
    },
    "changes": {
      "Button": {
        "addedClasses": [],
        "removedClasses": [],
        "addedProps": {
          "onClick": "save",
          "disabled": "loading",
          "focusableWhenDisabled": "true",
          "aria-busy": "loading || undefined"
        },
        "removedProps": []
      },
      "LoaderCircleIcon": {
        "addedClasses": [
          "animate-spin"
        ],
        "removedClasses": [],
        "addedProps": {
          "aria-hidden": "\"true\"",
          "data-icon": "\"inline-start\""
        },
        "removedProps": []
      }
    }
  }
}