<div id="app">
  <div>
    <vu-button outline>primary</vu-button>
    <vu-button color="secondary" outline>secondary</vu-button>
    <vu-button color="info" outline>info</vu-button>
    <vu-button color="success" outline>success</vu-button>
    <vu-button color="warning" outline>warning</vu-button>
    <vu-button color="danger" outline>danger</vu-button>
    <vu-button color="light" outline>light</vu-button>
    <vu-button color="dark" outline>dark</vu-button>
  </div>
  <hr/>
  
  <div>
    <h4>Disabled</h4>
    <vu-button outline disabled>primary</vu-button>
    <vu-button color="secondary" outline disabled>secondary</vu-button>
    <vu-button color="info" outline disabled>info</vu-button>
    <vu-button color="success" outline disabled>success</vu-button>
    <vu-button color="warning" outline disabled>warning</vu-button>
    <vu-button color="danger" outline disabled>danger</vu-button>
    <vu-button color="light" outline disabled>light</vu-button>
    <vu-button color="dark" outline disabled>dark</vu-button>
  </div>
</div>
#app {
  margin: 1rem;
}
.vu-button {
  margin: .3rem;
}
View Compiled
new Vue({
  el: '#app',
})
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/@gloriajun/gvu@0.1.1/dist/gvu.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js
  2. https://cdn.jsdelivr.net/npm/vue/dist/vue.js
  3. https://cdn.jsdelivr.net/npm/@gloriajun/gvu@0.1.1/dist/gvu.umd.min.js