Buttons

Use Bootstrap's custom b-button component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Overview

BootstrapVue's <b-button> component generates either a <button> element, <a> element, or <router-link> component with the styling of a button.

<div>
  <b-button>Button</b-button>
  <b-button variant="danger">Button</b-button>
  <b-button variant="success">Button</b-button>
  <b-button variant="outline-primary">Button</b-button>
</div>

<!-- b-button.vue -->

Element type

The <b-button> component generally renders a <button> element. However, you can also render an <a> element by providing an href prop value. You may also generate vue-router <router-link> when providing a value for the to prop (vue-router is required).

<div>
  <b-button>I am a Button</b-button>
  <b-button href="#">I am a Link</b-button>
</div>

<!-- b-button-types.vue -->

Type

You can specify the button's type by setting the prop type to 'button', 'submit' or 'reset'. The default type is 'button'.

Note the type prop has no effect when either href or to props are set.

Sizing

Fancy larger or smaller buttons? Specify lg or sm via the size prop.

<b-row>
  <b-col lg="4" class="pb-2"><b-button size="sm">Small Button</b-button></b-col>
  <b-col lg="4" class="pb-2"><b-button>Default Button</b-button></b-col>
  <b-col lg="4" class="pb-2"><b-button size="lg">Large Button</b-button></b-col>
</b-row>

<!-- b-button-sizes.vue -->

Contextual variants

Use the variant prop to generate the various Bootstrap contextual button variants.

By default <b-button> will render with the secondary variant.

The variant prop adds the Bootstrap v4.3 class .btn-<variant> on the rendered button.

Solid color variants

primary, secondary, success, danger, warning, info, light and dark.

<div>
  <b-button variant="primary">Primary</b-button>
  <b-button variant="secondary">Secondary</b-button>
  <b-button variant="success">Success</b-button>
  <b-button variant="danger">Danger</b-button>
  <b-button variant="warning">Warning</b-button>
  <b-button variant="info">Info</b-button>
  <b-button variant="light">Light</b-button>
  <b-button variant="dark">Dark</b-button>
</div>

<!-- b-button-solid.vue -->

Outline color variants

In need of a button, but not the hefty background colors they bring? Use the outline-* variants to remove all background images and colors on any <b-button>:

outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light and outline-dark.

<div>
  <b-button variant="outline-primary">Primary</b-button>
  <b-button variant="outline-secondary">Secondary</b-button>
  <b-button variant="outline-success">Success</b-button>
  <b-button variant="outline-danger">Danger</b-button>
  <b-button variant="outline-warning">Warning</b-button>
  <b-button variant="outline-info">Info</b-button>
  <b-button variant="outline-light">Light</b-button>
  <b-button variant="outline-dark">Dark</b-button>
</div>

<!-- b-button-outline.vue -->

Link variant

Variant link will render a button with the appearance of a link while maintaining the default padding and size of a button.

<div>
  <b-button variant="link">Link</b-button>
</div>

<!-- b-button-link.vue -->

Tip: remove the hover underline from a link variant button by adding the Bootstrap v4.3 utility class text-decoration-none to <b-button>.

Block level buttons

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

<div>
  <b-button block variant="primary">Block Level Button</b-button>
</div>

<!-- b-button-block.vue -->

Pill style

Prefer buttons with a more rounded-pill style? Just set the prop pill to true.

<div>
  <b-button pill>Button</b-button>
  <b-button pill variant="primary">Button</b-button>
  <b-button pill variant="outline-secondary">Button</b-button>
  <b-button pill variant="success">Button</b-button>
  <b-button pill variant="outline-danger">Button</b-button>
  <b-button pill variant="info">Button</b-button>
</div>

<!-- b-button-pill.vue -->

This prop adds the Bootstrap v4.3 utility class .rounded-pill on the rendered button.

Squared style

Prefer buttons with a more square corner style? Just set the prop squared to true.

<div>
  <b-button squared>Button</b-button>
  <b-button squared variant="primary">Button</b-button>
  <b-button squared variant="outline-secondary">Button</b-button>
  <b-button squared variant="success">Button</b-button>
  <b-button squared variant="outline-danger">Button</b-button>
  <b-button squared variant="info">Button</b-button>
</div>

<!-- b-button-square.vue -->

The squared prop adds the Bootstrap v4.3 utility class .rounded-0 on the rendered button. The pill prop takes precedence over the squared prop.

Disabled state

Set the disabled prop to disable button default functionality. disabled also works with buttons rendered as <a> elements and <router-link> (i.e. with the href or to prop set).

<div>
  <b-button disabled size="lg" variant="primary">Disabled</b-button>
  <b-button disabled size="lg">Also Disabled</b-button>
</div>

<!-- b-button-disabled.vue -->

Pressed state and toggling

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when the prop pressed is set to true.

The pressed prop can be set to one of three values:

true: Sets the .active class and adds the attribute aria-pressed="true".
false: Clears the .active class and adds the attribute aria-pressed="false".
null: (default) Neither the class .active nor the attribute aria-pressed will be set.

To create a button that can be toggled between active and non-active states, use the .sync prop modifier (available in Vue 2.3+) on the pressed property

<template>
  <div>
    <h5>Pressed and un-pressed state</h5>
    <b-button :pressed="true" variant="success">Always Pressed</b-button>
    <b-button :pressed="false" variant="success">Not Pressed</b-button>

    <h5 class="mt-3">Toggleable Button</h5>
    <b-button :pressed.sync="myToggle" variant="primary">Toggle Me</b-button>
    <p>Pressed State: <strong>{{ myToggle }}</strong></p>

    <h5>In a button group</h5>
    <b-button-group size="sm">
      <b-button
        v-for="(btn, idx) in buttons"
        :key="idx"
        :pressed.sync="btn.state"
        variant="primary"
      >
        {{ btn.caption }}
      </b-button>
    </b-button-group>
    <p>Pressed States: <strong>{{ btnStates }}</strong></p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myToggle: false,
        buttons: [
          { caption: 'Toggle 1', state: true },
          { caption: 'Toggle 2', state: false },
          { caption: 'Toggle 3', state: true },
          { caption: 'Toggle 4', state: false }
        ]
      }
    },
    computed: {
      btnStates() {
        return this.buttons.map(btn => btn.state)
      }
    }
  }
</script>

<!-- b-button-toggles.vue -->

If using toggle button style for a radio or checkbox style interface, it is best to use the built-in button style support of <b-form-radio-group> and <b-form-checkbox-group>.

Router link support

Refer to the Router support reference docs for the various supported <router-link> related props.

Note the <router-link> prop tag is referred to as router-tag in bootstrap-vue.

Accessibility

When the href prop is set to '#', <b-button> will render a link (<a>) element with attribute role="button" set and appropriate keydown listeners (Enter and Space) so that the link acts like a native HTML <button> for screen reader and keyboard-only users. When disabled, the aria-disabled="true" attribute will be set on the <a> element.

When the href is set to any other value (or the to prop is used), role="button" will not be added, nor will the keyboard event listeners be enabled.

Component reference

`<b-button>`

Functional component

View source

<b-button> Component aliases
<b-button> Properties
<b-button> Events

Component aliases

<b-button> can also be used via the following aliases:

<b-btn>

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Properties

Property (Click to sort Ascending)	Type	Default	Description
`href`	`String`		Denotes the target URL of the link for standard a links
`rel`	`String`	`null`	Sets the 'rel' attribute on the rendered link
`target`	`String`	`'_self'`	Sets the 'target' attribute on the rendered link
`active`	`Boolean`	`false`	When set to 'true', places the component in the active state with active styling
`disabled`	`Boolean`	`false`	When set to 'true', disables the component's functionality and places it in a disabled state
`to`	`String` or `Object`		router-link prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object
`append`	`Boolean`	`false`	router-link prop: Setting append prop always appends the relative path to the current path
`replace`	`Boolean`	`false`	router-link prop: Setting the replace prop will call 'router.replace()' instead of 'router.push()' when clicked, so the navigation will not leave a history record
`event`	`String` or `Array`	`'click'`	router-link prop: Specify the event that triggers the link. In most cases you should leave this as the default
`active-class`	`String`		router-link prop: Configure the active CSS class applied when the link is active. Typically you will want to set this to class name 'active'
`exact`	`Boolean`	`false`	router-link prop: The default active class matching behavior is inclusive match. Setting this prop forces the mode to exactly match the route
`exact-active-class`	`String`		router-link prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'
`router-tag`	`String`	`'a'`	router-link prop: Specify which tag to render, and it will still listen to click events for navigation. 'router-tag' translates to the tag prop on the final rendered router-link. Typically you should use the default value
`no-prefetch`	`Boolean`	`false`	nuxt-link prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'no-prefetch' will disabled this feature for the specific link
`block`	`Boolean`	`false`	Renders a 100% width button (expands to the width of its parent container)
`size` Settings	`String`		Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
`variant` Settings	`String`	`'secondary'`	Applies one of the Bootstrap theme color variants to the component
`type`	`String`	`'button'`	The value to set the button's 'type' attribute to. Can be one of 'button', 'submit', or 'reset'
`tag`	`String`	`'button'`	Specify the HTML tag to render instead of the default tag
`pill`	`Boolean`	`false`	Renders the button with the pill style appearance when set to 'true'
`squared`	`Boolean`	`false`	Renders the button with non-rounded corners when set to 'true'
`pressed`	`Boolean`	`null`	When set to 'true', gives the button the appearance of being pressed and adds attribute 'aria-pressed="true"'. When set to `false` adds attribute 'aria-pressed="false"'. Tri-state prop. Syncable with the .sync modifier

<b-button> supports generating <router-link> or <nuxt-link> component (if using Nuxt.js). For more details on the router link (or nuxt link) specific props, see the Router support reference section.

Events

Event	Arguments	Description
`click`	Native click event object	Emitted when non-disabled button clicked

`<b-button-close>`

Functional component

View source

<b-button-close> Component aliases
<b-button-close> Properties
<b-button-close> Events

Component aliases

<b-button-close> can also be used via the following aliases:

<b-btn-close>

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Properties

Property	Type	Default	Description
`content` Settings v2.3.0+	`String`	`'×'`	The content of the close button
`disabled`	`Boolean`	`false`	When set to 'true', disables the component's functionality and places it in a disabled state
`aria-label` Settings	`String`	`'Close'`	Sets the value of 'aria-label' attribute on the rendered element
`text-variant` Settings	`String`		Applies one of the Bootstrap theme color variants to the text

Events

Event	Arguments	Description
`click`	Native click event object	Emitted when non-disabled button clicked

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-button>`	`BButton`	`bootstrap-vue`
`<b-button-close>`	`BButtonClose`	`bootstrap-vue`

Example:

import { BButton } from 'bootstrap-vue'
Vue.component('b-button', BButton)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`ButtonPlugin`	`bootstrap-vue`

Example:

import { ButtonPlugin } from 'bootstrap-vue'
Vue.use(ButtonPlugin)

Overview

Element type

Type

Sizing

Contextual variants

Solid color variants

Outline color variants

Link variant

Block level buttons

Pill style

Squared style

Disabled state

Pressed state and toggling

Router link support

Accessibility

See also

Component reference

Component aliases

Properties

Events

Component aliases

Properties

Events

Importing individual components

Importing as a Vue.js plugin