Button 🔗

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples 🔗

Use any of the available button types to quickly create a styled button.

<btn>Default</btn>
<btn type="primary">Primary</btn>
<btn type="success">Success</btn>
<btn type="info">Info</btn>
<btn type="warning">Warning</btn>
<btn type="danger">Danger</btn>
<btn type="link">Link</btn>
<!-- btn-examples.vue -->

Links 🔗

Buttons with href or to prop will render as link tag.

<h4>Native links</h4>
<btn href="#">Default</btn>
<btn href="#" type="primary">Primary</btn>
<h4>Vue Router links</h4>
<btn to="/">Default</btn>
<btn to="/" type="primary">Primary</btn>
<!-- btn-links.vue -->

Sizes 🔗

Fancy larger or smaller buttons? Add size lg, sm, or xs for additional sizes.

<p>
  <btn size="lg" type="primary">Large button</btn>
  <btn size="lg">Large button</btn>
</p>
<p>
  <btn type="primary">Default button</btn>
  <btn>Default button</btn>
</p>
<p>
  <btn size="sm" type="primary">Small button</btn>
  <btn size="sm">Small button</btn>
</p>
<p>
  <btn size="xs" type="primary">Extra small button</btn>
  <btn size="xs">Extra small button</btn>
</p>
<!-- btn-sizes.vue -->

Create block level buttons—those that span the full width of a parent — by adding block.

<btn block size="lg" type="primary">Block level button</btn>
<btn block size="lg">Block level button</btn>
<!-- btn-block.vue -->

Active state 🔗

Add active to make buttons appear pressed (with a darker background, darker border, and inset shadow).

<h4>Buttons</h4>
<btn active type="primary">Primary button</btn>
<btn active>Button</btn>
<h4>Links</h4>
<btn active href="#" type="primary">Primary button</btn>
<btn active to="/">Button</btn>
<!-- btn-active.vue -->

Disabled state 🔗

Add disabled to make buttons unclickable.

<h4>Buttons</h4>
<btn disabled type="primary">Primary button</btn>
<btn disabled>Button</btn>
<h4>Links</h4>
<btn disabled href="#" type="primary">Primary button</btn>
<btn disabled to="/">Button</btn>
<!-- btn-disabled.vue -->

Checkbox / Radio 🔗

Add input-type to render <btn> as checkbox or radio input.

Note: This needed to work with <btn-group> for correct styles.

Checkbox example 🔗

<template>
  <section>
    <btn-group>
      <btn input-type="checkbox" input-value="1" v-model="model">Checkbox 1</btn>
      <btn input-type="checkbox" input-value="2" v-model="model">Checkbox 2</btn>
      <btn input-type="checkbox" input-value="3" v-model="model">Checkbox 3</btn>
      <btn input-type="checkbox" input-value="4" v-model="model" disabled>Checkbox 4 (Disabled)</btn>
    </btn-group>
    <hr/>
    <alert>Selected: {{model}}</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        model: ['1']
      }
    }
  }
</script>
<!-- btn-input-checkbox.vue -->

Radio example 🔗

<template>
  <section>
    <btn-group>
      <btn input-type="radio" input-value="1" v-model="model">Radio 1</btn>
      <btn input-type="radio" input-value="2" v-model="model">Radio 2</btn>
      <btn input-type="radio" input-value="3" v-model="model">Radio 3</btn>
      <btn input-type="radio" input-value="4" v-model="model" disabled>Radio 4 (Disabled)</btn>
    </btn-group>
    <hr/>
    <alert>Selected: {{model}}</alert>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        model: '1'
      }
    }
  }
</script>
<!-- btn-input-radio.vue -->

API Reference 🔗

Btn 🔗

Props 🔗

Slots 🔗

Events 🔗

Note: Use the .native modifier to capture browser native events such as: @click.native="...", @mouseover.native="...", etc.