@vuesimple/vs-button

A simple vue button. Perfect for all your button scenarios.
2,831 33
vue vuejs popup web notification button front-end vue-js vue-button vue-js-button vs-button
Install
npm install @vuesimple/vs-button
Latest Version:3.1.8
Vue:3
Older releases:2
License:MIT
Last Updated:Oct 14, 2026
Links: GitHub  ·  npm
Maintainer: ashwinkshenoy

Vue Simple Button

🗃 A simple vue button.

A light weight vue plugin built groundup.

npm npm

forthebadge forthebadge forthebadge forthebadge forthebadge forthebadge


📺 Live Demo

Demo: Link


🛠 Install

npm i @vuesimple/vs-button

🚀 Usage

<template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>

<script>
  import VsButton from '@vuesimple/vs-button';

  export default {
    components: {
      VsButton,
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-button@<version>/dist/vs-button.min.js"></script>

// Main/Entry file
app.use(VsButton.plugin);

<template>
  <vs-button>Default</vs-button>
  <vs-button variant="primary" fill>Primary</vs-button>
</template>

⚙ Props

Name Type Default Description
variant String default Type of button to be shown. (default, primary, secondary, warning, danger, success, light)
size String medium Size of button. (small, medium, large)
fill Boolean - Applies background color to button
isRound Boolean - Applies round/pill styling
isLoading Boolean - Will show loader and button will be disabled
disabled Boolean - Disable button
href String - Link/URL string
target String - Can add _blank, _self
rel String - Rel strings can be added like noreferrer, noopener

🎨 CSS Variables

Button variants can now be themed with CSS custom properties.

Example:

.my-brand-theme .vs-button {
  --vs-button-primary-color: #0b5ed7;
  --vs-button-primary-border: #0b5ed7;
  --vs-button-primary-hover-bg: #dbeafe;
  --vs-button-primary-fill-bg: #0b5ed7;
  --vs-button-primary-fill-hover-bg: #084298;

  --vs-button-secondary-color: #495057;
  --vs-button-secondary-border: #495057;
  --vs-button-secondary-fill-bg: #495057;

  --vs-button-disabled-bg: #eceff3;
  --vs-button-disabled-color: #9aa4ad;
}

Available variants: primary, secondary, success, warning, danger, light.

Each variant supports these tokens:

  • --vs-button-<variant>-color
  • --vs-button-<variant>-bg
  • --vs-button-<variant>-border
  • --vs-button-<variant>-hover-color
  • --vs-button-<variant>-hover-bg
  • --vs-button-<variant>-hover-border
  • --vs-button-<variant>-active-color
  • --vs-button-<variant>-active-bg
  • --vs-button-<variant>-active-border
  • --vs-button-<variant>-focus-border
  • --vs-button-<variant>-focus-shadow
  • --vs-button-<variant>-fill-color
  • --vs-button-<variant>-fill-bg
  • --vs-button-<variant>-fill-border
  • --vs-button-<variant>-fill-hover-bg
  • --vs-button-<variant>-fill-hover-border
  • --vs-button-<variant>-fill-active-bg
  • --vs-button-<variant>-fill-active-border
  • --vs-button-<variant>-fill-focus-border
  • --vs-button-<variant>-fill-focus-shadow

Global disabled state tokens:

  • --vs-button-disabled-bg
  • --vs-button-disabled-border
  • --vs-button-disabled-color

🔥 Events

Name Description
click Emitted when the button clicked.

📎 Slots

You can define own item markup via slots:

Name Description
(default) Holds the button content and can contain HTML.
loader Holds the loader component and can contain HTML/vue-component.

Related Packages

@vuesimple/vs-pagination

A simple vue pagination

10,154 33
front-end notification popup vue vue-js vuejs web pagination vs-pagination vue-js-pagination +1
@vuesimple/vs-alert

A simple vue alert. Perfect for all your alert scenarios.

5,598 33
front-end notification popup vue vue-js vuejs web alert vs-alert vue-alert +1
@vuesimple/vs-accordion

A simple vue accordion.

4,960 33
front-end notification popup vue vue-js vuejs web accordion vs-accordion vue-accordion +1
@vuesimple/vs-select

A simple vue select. Perfect for all your select scenarios.

4,630 33
front-end notification popup vue vue-js vuejs web select vs-select vue-js-select +1
@vuesimple/vs-loader

A simple vue loader. Perfect for all your loader scenarios.

3,581 33
front-end notification popup vue vue-js vuejs web loader vs-loader vue-js-loader +1

Version History

Version Released Vue License
3.1.8 ^3.2.37 MIT
3.1.7 ^3.2.37 MIT
3.1.6 ^3.2.37 MIT
3.1.5 ^3.2.37 MIT
3.1.3 ^3.2.37 MIT