Button components for the creation of interfaces with vuejs , Each button has a different style and hover, just by changing the type property you will have a totally different button.

If you are an individual user and have enjoyed the productivity of using Vuttons, consider donating as a sign of appreciation - like buying me coffee once in a while ☕️ Become a Patron .



# npm
npm install vuttons
# yarn
yarn add vuttons


import Vue from 'vue'
import Vuttons from 'vuttons'

import 'vuttons/dist/vuttons.css'


By default Vuttons has the colors (primary, success, danger, warning, dark) and can be used in any button in the color property, you can also put a custom color as value for example #f0f o rgb(200,200,100)

The colors allowed as a value are RGB y HEX


All the buttons can be in the active state, almost all the buttons have a different active style


All buttons can be in the disabled state and with a low opacity style to inform the user


The buttons can be in a loading state adding the property, almost all the buttons have a different load.


You can have a submit status on the buttons with the submit property, almost all the buttons have a different submit.


If you need the button to be like a link you can do it with the href property and its value is a url as you would with an element <a href="..."></a> of html

By default it does not open a new weft, if you need that functionality for it we have the property blank that simulates the tag html target="_blank"


You have the possibility to use vue-router with vuttons by adding the to property and as a value the route as if it were a this.$router.push(...)


You can change the size of the button with the size property, the allowed values ​​are:

  • extraLarge
  • large
  • default
  • small
  • mini

the buttons are aligned so they are all of the same height and so do not break the design line, if you want to change a button to a specific size you can do it using css with the class .vut