Vuttons

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 .

Documentation

Install

# npm
npm install vuttons
# yarn
yarn add vuttons

Use

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

import 'vuttons/dist/vuttons.css'
Vue.use(Vuttons)

Colors

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

Active

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

Disabled

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

Loading

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

Submit

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

Href

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"

To

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(...)

Size

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