Properties
Property | Type | Default Value |
---|---|---|
vertical | Boolean | false |
size | String | |
tag | String | div |
aria-role | String | group |
Group a series of buttons together on a single line with
<b-button group>
.
Example 1: Default button group and button group using contextual variants
<div>
<b-button-group>
<b-button>Button 1</b-button>
<b-button>Button 2</b-button>
<b-button>Button 3</b-button>
<b-button>Button 4</b-button>
<b-button>Button 5</b-button>
</b-button-group>
<br><br>
<b-button-group>
<b-button variant="success">Success</b-button>
<b-button variant="info">Info</b-button>
<b-button variant="warning">Warning</b-button>
<b-button variant="primary">Primary</b-button>
<b-button variant="danger">Danger</b-button>
<b-button variant="link">Link</b-button>
</b-button-group>
</div>
<!-- button-group-1.vue -->
Set the size prop to lg
or sm
to render larger or smaller, respectively, buttons.
There is no need to specify the size on the individual buttons.
Example 2: Default, Small, and Large button groups
<div>
<b-button-group>
<b-button>Button 1</b-button>
<b-button>Button 2</b-button>
<b-button>Button 3</b-button>
</b-button-group>
<br><br>
<b-button-group size="sm">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
<br><br>
<b-button-group size="lg">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
</div>
<!-- button-group-2.vue -->
Make a set of buttons appear vertically stacked rather than horizontally by setting
the vertical
prop. Split button dropdowns are not supported here.
Example 3: Vertical button group
<div>
<b-button-group vertical>
<b-button>Top</b-button>
<b-button>Middle</b-button>
<b-button>Bottom</b-button>
</b-button-group>
</div>
<!-- button-group-3.vue -->
Add <b-dropdown>
menus directly inside your <b-button-group>
. Note
that split dropdown menus are not supported when prop vertical
is set.
Example 4: button group with dropdown menus
<div>
<b-button-group>
<b-button>Button 1</b-button>
<b-button>Button 2</b-button>
<b-dropdown right text="Menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button>Button 3</b-button>
<b-dropdown right split text="Split Menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
</b-button-group>
</div>
<!-- button-group-4.vue -->
<b-button-group>
can also be used by its shorter alias <b-btn-group>
.
Also check out the <b-button-toolbar>
component for generating
toolbars containing button groups and input groups.
<b-button-group>
Property | Type | Default Value |
---|---|---|
vertical | Boolean | false |
size | String | |
tag | String | div |
aria-role | String | group |
.native
modifier to capture browser native events such as:
@click.native="..."
,
@mouseover.native="..."
, etc. See the the official
Vue.js documentation
for more information.
Component | Import Path |
---|---|
<b-button-group> | bootstrap-vue/es/components/button-group/button-group |
Example:
import bButtonGroup from 'bootstrap-vue/es/components/button-group/button-group';
Vue.component('b-button-group', bButtonGroup);
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
import { ButtonGroup } from 'bootstrap-vue/es/components';
Vue.use(ButtonGroup);