{"_id":"@bootcn-vue/buttons","_rev":"2-5c5fd774bf62e1ea69c4ce87a3bec522","name":"@bootcn-vue/buttons","dist-tags":{"latest":"0.4.0"},"versions":{"0.2.2":{"name":"@bootcn-vue/buttons","version":"0.2.2","keywords":["vue","vue3","bootstrap","button","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","_id":"@bootcn-vue/buttons@0.2.2","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"homepage":"https://banavasi.github.io/Bootcn-vue/?path=/docs/components-button--docs","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"dist":{"shasum":"b2debe9a57defad33cf1ef8c4234b2bb8c6b145e","tarball":"https://registry.npmjs.org/@bootcn-vue/buttons/-/buttons-0.2.2.tgz","fileCount":8,"integrity":"sha512-AYhkThxQIH30z55+PiLuZnX1IVBNFCxBxWU+j/6ORr/vgx8KGotRogQ6fXHfHL2WmBF+VcEN2yWJ75dNCwUiCQ==","signatures":[{"sig":"MEQCIEovOyZzo8BCZowPBCI/RmNoKqhcfIha8o9X7+jO+cExAiAwSrpmDPGkbJz4Kc3BB8L2UbukilcIDMrMd5LX3KwNPA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bootcn-vue%2fbuttons@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":18467},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-buttons-0.2.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./Button":{"types":"./src/Button/index.d.ts","import":"./src/Button/index.ts"}},"scripts":{"dev":"tsup --watch","lint":"eslint src --fix","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","type-check":"tsc --noEmit"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/bb5c7179eca55fe5ae0eed5b7022e5b8/bootcn-vue-buttons-0.2.2.tgz","_integrity":"sha512-AYhkThxQIH30z55+PiLuZnX1IVBNFCxBxWU+j/6ORr/vgx8KGotRogQ6fXHfHL2WmBF+VcEN2yWJ75dNCwUiCQ==","repository":{"url":"git+https://github.com/banavasi/Bootcn-vue.git","type":"git","directory":"packages/buttons"},"_npmVersion":"10.9.4","description":"Accessible, customizable Button components built with Bootstrap 5 and Vue 3","directories":{},"_nodeVersion":"22.21.1","dependencies":{"reka-ui":"^2.2.1","@bootcn-vue/core":"0.2.2"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","jsdom":"^26.0.0","vitest":"^3.1.1","typescript":"~5.8.0","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^5.2.0"},"peerDependencies":{"vue":"^3.5.0","bootstrap":"^5.3.0"},"_npmOperationalInternal":{"tmp":"tmp/buttons_0.2.2_1768070684213_0.25895114594017987","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@bootcn-vue/buttons","version":"0.4.0","description":"Accessible, customizable Button components built with Bootstrap 5 and Vue 3","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./Button":{"types":"./src/Button/index.d.ts","import":"./src/Button/index.ts"}},"dependencies":{"reka-ui":"^2.2.1","@bootcn-vue/core":"0.4.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.0","@vue/test-utils":"^2.4.6","jsdom":"^26.0.0","tsup":"^8.3.5","typescript":"~5.8.0","unplugin-vue":"^7.1.0","vitest":"^3.1.1","vue":"^3.5.13"},"peerDependencies":{"bootstrap":"^5.3.0","vue":"^3.5.0"},"publishConfig":{"access":"public","provenance":true},"repository":{"type":"git","url":"git+https://github.com/banavasi/Bootcn-vue.git","directory":"packages/buttons"},"homepage":"https://banavasi.github.io/Bootcn-vue/?path=/docs/components-button--docs","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"keywords":["vue","vue3","bootstrap","button","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","type-check":"tsc --noEmit","lint":"eslint src --fix","test":"vitest run","test:watch":"vitest"},"_id":"@bootcn-vue/buttons@0.4.0","_integrity":"sha512-Zoa80M2we+cf//MW2FP7FC+CgElvWJA8WjOjDxUv7bXDmUuuJBOyOdWy8kc5vGG8+dZ+6CiwjL3zT4zpCq+Ydg==","_resolved":"/tmp/2041a6f3d74c02a6c6167b42d2043923/bootcn-vue-buttons-0.4.0.tgz","_from":"file:bootcn-vue-buttons-0.4.0.tgz","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-Zoa80M2we+cf//MW2FP7FC+CgElvWJA8WjOjDxUv7bXDmUuuJBOyOdWy8kc5vGG8+dZ+6CiwjL3zT4zpCq+Ydg==","shasum":"54a11126dbf61583ea43c7e6b69839616ae5f213","tarball":"https://registry.npmjs.org/@bootcn-vue/buttons/-/buttons-0.4.0.tgz","fileCount":8,"unpackedSize":18467,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bootcn-vue%2fbuttons@0.4.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDFb5GaHxyUy0ktODWOEJR09uxlcoFyQgGsBx5zJo5SYAIhAOo60qv59teOQAQc49xwidY8T+WM4bve2HRTicwrUIB7"}]},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"directories":{},"maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/buttons_0.4.0_1768262285079_0.09075783242745272"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-10T18:44:44.143Z","modified":"2026-01-12T23:58:05.618Z","0.2.2":"2026-01-10T18:44:44.352Z","0.4.0":"2026-01-12T23:58:05.260Z"},"bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"author":{"name":"Shashank Shandilya"},"license":"MIT","homepage":"https://banavasi.github.io/Bootcn-vue/?path=/docs/components-button--docs","keywords":["vue","vue3","bootstrap","button","components"],"repository":{"type":"git","url":"git+https://github.com/banavasi/Bootcn-vue.git","directory":"packages/buttons"},"description":"Accessible, customizable Button components built with Bootstrap 5 and Vue 3","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"readme":"# @bootcn-vue/buttons\n\nAccessible, customizable Button components built with Bootstrap 5 and Vue 3.\n\n[![npm version](https://badge.fury.io/js/@bootcn-vue%2Fbuttons.svg)](https://www.npmjs.com/package/@bootcn-vue/buttons)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## 📚 Documentation\n\n**[View Components & Examples](https://banavasi.github.io/Bootcn-vue/?path=/docs/components-button--docs)** - Interactive Storybook\n\n## Installation\n\n### Using CLI (Recommended)\n\n```bash\n# Add button component to your project\nnpx @bootcn-vue/cli add button\n```\n\nThis copies the component directly to your `src/components/ui/Button/` directory, giving you full control to customize it.\n\n### Direct Installation\n\n```bash\nnpm install @bootcn-vue/buttons @bootcn-vue/core reka-ui bootstrap\n```\n\n## Features\n\n- ✨ **All Bootstrap Variants** - primary, secondary, success, danger, warning, info, light, dark\n- 🎨 **Outline Variants** - outline-primary, outline-secondary, etc.\n- 📏 **Multiple Sizes** - sm, md, lg\n- ♿ **Accessible** - Built on Reka UI for proper accessibility\n- 🔧 **Customizable** - Full control when using CLI\n- ⚡ **Loading State** - Built-in spinner support\n- 🎯 **TypeScript** - Full type safety\n\n## Usage\n\n### With CLI (Copy-Paste Approach)\n\n```bash\n# Initialize bootcn-vue\nnpx @bootcn-vue/cli init\n\n# Add button component\nnpx @bootcn-vue/cli add button\n```\n\nThen use it in your Vue component:\n\n```vue\n<script setup lang=\"ts\">\nimport { Button } from \"@/components/ui/Button\";\n</script>\n\n<template>\n  <Button variant=\"primary\" size=\"lg\"> Click me! </Button>\n</template>\n```\n\n### Direct Import (npm package)\n\n```vue\n<script setup lang=\"ts\">\nimport { Button } from \"@bootcn-vue/buttons\";\n</script>\n\n<template>\n  <Button variant=\"primary\" size=\"lg\"> Click me! </Button>\n</template>\n```\n\n## Examples\n\n### Basic Variants\n\n```vue\n<Button variant=\"primary\">Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"success\">Success</Button>\n<Button variant=\"danger\">Danger</Button>\n```\n\n### Outline Variants\n\n```vue\n<Button variant=\"outline-primary\">Outline Primary</Button>\n<Button variant=\"outline-secondary\">Outline Secondary</Button>\n```\n\n### Sizes\n\n```vue\n<Button size=\"sm\">Small</Button>\n<Button size=\"md\">Medium</Button>\n<Button size=\"lg\">Large</Button>\n```\n\n### Loading State\n\n```vue\n<Button :loading=\"true\">Loading...</Button>\n```\n\n### As Link\n\n```vue\n<Button as=\"a\" href=\"/about\">Link Button</Button>\n```\n\n### Custom Class\n\n```vue\n<Button class=\"my-custom-class\">Custom Button</Button>\n```\n\n## Props\n\n```typescript\ninterface Props {\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"danger\"\n    | \"warning\"\n    | \"info\"\n    | \"light\"\n    | \"dark\"\n    | \"outline-primary\"\n    | \"outline-secondary\"\n    | \"outline-success\"\n    | \"outline-danger\"\n    | \"outline-warning\"\n    | \"outline-info\"\n    | \"outline-light\"\n    | \"outline-dark\"\n    | \"link\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  loading?: boolean;\n  class?: string;\n  as?: string | Component; // Render as different element\n  asChild?: boolean; // Use child element as root\n}\n```\n\n## Dependencies\n\n- `@bootcn-vue/core` - Core utilities\n- `reka-ui` - Accessible primitives\n\n## Peer Dependencies\n\n- `vue` ^3.5.0\n- `bootstrap` ^5.3.0\n\n## Links\n\n- **[GitHub Repository](https://github.com/banavasi/Bootcn-vue)**\n- **[Documentation](https://banavasi.github.io/Bootcn-vue/)**\n- **[Report Issues](https://github.com/banavasi/Bootcn-vue/issues)**\n\n## Related Packages\n\n- [@bootcn-vue/cli](https://www.npmjs.com/package/@bootcn-vue/cli) - CLI for adding components\n- [@bootcn-vue/core](https://www.npmjs.com/package/@bootcn-vue/core) - Core utilities\n- [@bootcn-vue/forms](https://www.npmjs.com/package/@bootcn-vue/forms) - Form components\n\n## License\n\nMIT © [Shashank Shandilya](https://github.com/banavasi)\n","readmeFilename":"README.md"}