Button

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.

Component reference

`<b-button>`

Functional component

View source

<b-button> Component aliases
<b-button> Properties
<b-button> Slots
<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

All property default values are globally configurable.

Property (Click to sort ascending)	Type (Click to sort ascending)	Default	Description
`active`	`Boolean`	`false`	When set to `true`, places the component in the active state with active styling
`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'
`append`	`Boolean`	`false`	<router-link> prop: Setting append prop always appends the relative path to the current path
`block`	`Boolean`	`false`	Renders a 100% width button (expands to the width of its parent container)
`disabled`	`Boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
`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'
`exact-path`	`Boolean`	`false`	<router-link> prop: Allows matching only using the path section of the url, effectively ignoring the query and the hash sections
`exact-path-active-class`	`String`		<router-link> prop: Configure the active CSS class applied when the link is active with exact path match. Typically you will want to set this to class name 'active'
`href`	`String`		<b-link> prop: Denotes the target URL of the link for standard a links
`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
`pill`	`Boolean`	`false`	Renders the button with the pill style appearance when set to 'true'
`prefetch` v2.15.0+	`Boolean`	`null`	<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 `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
`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
`rel`	`String`	`null`	<b-link> prop: Sets the `rel` attribute on the rendered link
`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
`router-component-name` v2.15.0+	`String`		<b-link> prop: BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. In cases where you want to use a 3rd party link component based on `<router-link>`, set this prop to the component name. e.g. set it to 'g-link' if you are using Gridsome (note only `<router-link>` specific props are passed to the component)
`size`	`String`		Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
`squared`	`Boolean`	`false`	Renders the button with non-rounded corners when set to 'true'
`tag`	`String`	`'button'`	Specify the HTML tag to render instead of the default tag
`target`	`String`	`'_self'`	<b-link> prop: Sets the `target` attribute on the rendered link
`to`	`Object` or `String`		<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
`type`	`String`	`'button'`	The value to set the button's 'type' attribute to. Can be one of 'button', 'submit', or 'reset'
`variant`	`String`	`'secondary'`	Applies one of the Bootstrap theme color variants to the component

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

Slots

Name	Description
`default`	Content to place in the button

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> Slots
<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

All property default values are globally configurable.

Property	Type	Default	Description
`aria-label`	`String`	`'Close'`	Sets the value of 'aria-label' attribute on the rendered element
`content` 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
`text-variant`	`String`		Applies one of the Bootstrap theme color variants to the text

Slots

Name	Description
`default`	Content to place in the button. Overrides the `content` prop

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)