@bootcn-vue/buttons

Accessible, customizable Button components built with Bootstrap 5 and Vue 3.


📚 Documentation

View Components & Examples - Interactive Storybook

Installation

$3

``bash


Add button component to your project


npx @bootcn-vue/cli add button
`

This copies the component directly to your src/components/ui/Button/ directory, giving you full control to customize it.

$3

`bash
npm install @bootcn-vue/buttons @bootcn-vue/core reka-ui bootstrap
`

Features

- ✨ All Bootstrap Variants - primary, secondary, success, danger, warning, info, light, dark
- 🎨 Outline Variants - outline-primary, outline-secondary, etc.
- 📏 Multiple Sizes - sm, md, lg
- ♿ Accessible - Built on Reka UI for proper accessibility
- 🔧 Customizable - Full control when using CLI
- ⚡ Loading State - Built-in spinner support
- 🎯 TypeScript - Full type safety

Usage

$3

`bash


Initialize bootcn-vue

npx @bootcn-vue/cli init

Add button component

npx @bootcn-vue/cli add button
`

Then use it in your Vue component:

`vue



`

$3

`vue



`

Examples

$3

`vue
Primary
Secondary
Success
Danger
`

$3

`vue
Outline Primary
Outline Secondary
`

$3

`vue
Small
Medium
Large
`

$3

`vue
Loading...
`

$3

`vue
Link Button
`

$3

`vue
Custom Button
`

Props

`typescript
interface Props {
variant?:
| "primary"
| "secondary"
| "success"
| "danger"
| "warning"
| "info"
| "light"
| "dark"
| "outline-primary"
| "outline-secondary"
| "outline-success"
| "outline-danger"
| "outline-warning"
| "outline-info"
| "outline-light"
| "outline-dark"
| "link";
size?: "sm" | "md" | "lg";
loading?: boolean;
class?: string;
as?: string | Component; // Render as different element
asChild?: boolean; // Use child element as root
}
`

Dependencies

- @bootcn-vue/core - Core utilities
- reka-ui - Accessible primitives

Peer Dependencies

- vue ^3.5.0
- bootstrap` ^5.3.0

Links

- GitHub Repository
- Documentation
- Report Issues

Related Packages

- @bootcn-vue/cli - CLI for adding components
- @bootcn-vue/core - Core utilities
- @bootcn-vue/forms - Form components

License

MIT © Shashank Shandilya