Button

A simple set of buttons

GitHub

Demo

Different Sizes

Different Types

Types of Links

Link
Google.com

Disabled

Loading state button

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/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

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

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

Nuxt.js

Nuxt Code Snippet

After installation,

• Create a file /plugins/vs-button.js

  import Vue from 'vue';
  import VsButton from '@vuesimple/vs-button';
  
  Vue.component('vs-button', VsButton);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-button', mode: 'client' }
      ...
    ]
  }

• In the page/ component

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

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsButton from '@vuesimple/vs-button' & add in component:{VsButton} and use it within component, without globally installing in plugin folder.

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

Events

Name	Description
click	Emitted when the button clicked.

Slots

You can define own item markup via #slot-name:

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