@bootcn-vue/buttons

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

📚 Documentation

View Components & Examples - Interactive Storybook

Installation

Using CLI (Recommended)

# 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.

Direct Installation

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

With CLI (Copy-Paste Approach)

# Initialize bootcn-vue
npx @bootcn-vue/cli init

# Add button component
npx @bootcn-vue/cli add button

Then use it in your Vue component:

<script setup lang="ts">
import { Button } from "@/components/ui/Button";
</script>

<template>
  <Button variant="primary" size="lg"> Click me! </Button>
</template>

Direct Import (npm package)

<script setup lang="ts">
import { Button } from "@bootcn-vue/buttons";
</script>

<template>
  <Button variant="primary" size="lg"> Click me! </Button>
</template>

Examples

Basic Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>

Outline Variants

<Button variant="outline-primary">Outline Primary</Button>
<Button variant="outline-secondary">Outline Secondary</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Loading State

<Button :loading="true">Loading...</Button>

As Link

<Button as="a" href="/about">Link Button</Button>

Custom Class

<Button class="my-custom-class">Custom Button</Button>

Props

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