Vue Buttons

Use Bootstrap buttons and Bootstrap custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.


Bootstrap provides different styles of buttons:

  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
  • .btn-outline-default
  • .btn-outline-primary
  • .btn-outline-success
  • .btn-outline-info
  • .btn-outline-warning
  • .btn-outline-danger


Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<base-button type="primary">Button</base-button>
<base-button class="btn-icon" type="primary" icon="ni ni-bag-17">With Icon</base-button>
<base-button type="primary" icon="ni ni-bag-17"></base-button>
<base-button type="default">Default</base-button>
<base-button type="primary">Primary</base-button>
<base-button type="secondary">Secondary</base-button>
<base-button type="info">Info</base-button>
<base-button type="success">Success</base-button>
<base-button type="danger">Danger</base-button>
<base-button type="warning">Warning</base-button>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier styles by adding outline prop to remove all background images and colors on any button.

<base-button type="default" outline>Default</base-button>
<base-button type="primary" outline>Primary</base-button>
<base-button type="secondary" outline>Secondary</base-button>
<base-button type="info" outline>Info</base-button>
<base-button type="success" outline>Success</base-button>
<base-button type="danger" outline>Danger</base-button>
<base-button type="warning" outline>Warning</base-button>


Fancy larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.

<base-button type="primary" size="lg">Large Button</base-button>
<base-button type="secondary" size="lg">Large Button</base-button>
<base-button type="primary" size="sm">Small Button</base-button>
<base-button type="secondary" size="sm">Small Button</base-button>

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

<base-button class="btn-block" type="primary">Block level button</base-button>
<base-button class="btn-block" type="secondary">Block level button</base-button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

<base-button class="btn-block active" type="primary" size="lg">Primary link</base-button>
<base-button class="btn-block active" type="secondary" size="lg">Link</base-button>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<base-button class="disabled" type="primary">Primary button</base-button>
<base-button class="disabled" type="secondary">Button</base-button>