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.
<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.
PropertiesAll 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
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
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.
Name
Description
default Content to place in the button Events
Event
Arguments
Description
click
<b-button-close> Component aliases <b-button-close> Properties <b-button-close> Slots <b-button-close> Events <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.
PropertiesAll 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
String '&times;' 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
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)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4