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.
<div class="row">
<template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
<div class="col-md-4 pb-2" v-for="size in ['sm','','lg']" :key="`${variant}_${size}`">
<b-button :size="size" :variant="variant">
{{variant}} {{size}}
</b-button>
</div>
</template>
</div>
The <b-button>
component generally renders a <button>
element. However, you can also
render an <a>
element by providing an href
prop value. You man 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>
When neither href
nor to
props are provided, <b-button>
renders an html <button>
element. You can specify the button's type by setting the prop type
to button
,
submit
or reset
. The default type is button
.
Fancy larger or smaller buttons? Specify lg
or sm
via the size
prop.
Create block level buttons — those that span the full width of a parent — by
setting the block
prop.
Button contextual variants
Use the variant
prop to generate the various bootstrap contextual button variants.
By default <b-button>
will render with the secondary
variant.
Solid color variants
primary
, secondary
, success
, warning
, and danger
.
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-warning
,
and outline-danger
.
Link variant
Variant link
will render a button with the appearance of a link while maintaining the
default padding and size of a button.
Disabled state
Set the disabled
prop to disable button default functionality. disabled
also
works with buttons, rendered as <a>
elements and <router-link>
.
<div>
<b-button disabled variant="success">Disabled</b-button>
<b-button variant="success">Not Disabled</b-button>
</div>
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>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 in buttons" :pressed.sync="btn.state" :variant="btn.variant" :key="btn.variant">
{{ btn.caption }}
</b-button>
</b-button-group>
<p>Pressed States: <strong>{{ btnStates }}</strong></p>
</div>
</template>
<script>
export default {
data () {
return {
myToggle: false,
buttons: [
{ variant: 'primary', caption: 'Toggle 1', state: true },
{ variant: 'danger', caption: 'Toggle 2', state: false },
{ variant: 'warning', caption: 'Toggle 3', state: true },
{ variant: 'success', caption: 'No Toggle', state: null },
{ variant: 'outline-success', caption: 'Toggle 5', state: false },
{ variant: 'outline-primary', caption: 'Toggle 6', state: false }
]
}
},
computed: {
btnStates () {
return this.buttons.map(btn => btn.state)
}
}
}
</script>
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-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
.
<b-button>
can also be used by its shorter alias <b-btn>
.
See also
Component Reference
Importing Individual Components
Component | Import Path |
---|
<b-button> | bootstrap-vue/es/components/button/button |
<b-button-close> | bootstrap-vue/es/components/button/button-close |
Example:
import bButton from 'bootstrap-vue/es/components/button/button';
Vue.component('b-button', bButton);
Importing Button as a Vue plugin
This plugin includes all of the above listed individual
components.
Plugins also include any component aliases.
import { Button } from 'bootstrap-vue/es/components';
Vue.use(Button);