{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loading-button-usage",
  "title": "Loading Button Usage",
  "description": "component for the Loading Button Usage",
  "registryDependencies": [
    "@spectrumui/loading-button-dependencies"
  ],
  "files": [
    {
      "path": "app/registry/loading-button/loading-button-usage.tsx",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport { LoadingButton } from \"@/components/ui/loading-button\";\n\nconst LoadingButtonUsage = () => {\n  const [loading, setLoading] = React.useState(false);\n  const onClick = () => {\n    setLoading(true);\n    setTimeout(() => {\n      setLoading(false);\n    }, 1000);\n  };\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <LoadingButton loading={loading} onClick={onClick}>\n        default\n      </LoadingButton>\n      <LoadingButton variant=\"secondary\" loading={loading} onClick={onClick}>\n        secondary\n      </LoadingButton>\n      <LoadingButton variant=\"destructive\" loading={loading} onClick={onClick}>\n        destructive\n      </LoadingButton>\n      <LoadingButton variant=\"outline\" loading={loading} onClick={onClick}>\n        outline\n      </LoadingButton>\n      <LoadingButton variant=\"ghost\" loading={loading} onClick={onClick}>\n        ghost\n      </LoadingButton>\n      <LoadingButton variant=\"link\" loading={loading} onClick={onClick}>\n        link\n      </LoadingButton>\n    </div>\n  );\n};\n\nexport default LoadingButtonUsage;\n",
      "type": "registry:component",
      "target": "components/spectrumui/loading-button-usage.tsx"
    }
  ],
  "type": "registry:component"
}