Vue Bootstrap Buttons Group
Vue Buttons Group - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Group a series of buttons together on a single line with the button group.
Examples of Bootstrap button group use:
- Group of pricing options
- Group of licenses you can see on our MDB Pro page
See the following button groups examples:
Basic example
<template>
<mdb-btn-group>
<mdb-btn color="primary">Left</mdb-btn>
<mdb-btn color="primary">Middle</mdb-btn>
<mdb-btn color="primary">Right</mdb-btn>
</mdb-btn-group>
</template>
<script>
import { mdbBtn, mdbBtnGroup } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup
}
}
</script>
Ensure correct
role
and provide a labelIn order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be
role="group"
, while toolbars should have arole="toolbar"
.In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use
aria-label
, but alternatives such asaria-labelledby
can also be used.
Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
<template>
<mdb-btn-toolbar>
<mdb-btn-group class="mr-2">
<mdb-btn>1</mdb-btn>
<mdb-btn>2</mdb-btn>
<mdb-btn>3</mdb-btn>
<mdb-btn>4</mdb-btn>
</mdb-btn-group>
<mdb-btn-group class="mr-2">
<mdb-btn>5</mdb-btn>
<mdb-btn>6</mdb-btn>
<mdb-btn>7</mdb-btn>
</mdb-btn-group>
<mdb-btn-group>
<mdb-btn>8</mdb-btn>
</mdb-btn-group>
</mdb-btn-toolbar>
</template>
<script>
import { mdbBtn, mdbBtnGroup, mdbBtnToolbar } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup,
mdbBtnToolbar
}
}
</script>
Sizing
Instead of applying button sizing classes to every button in a group, just add .btn-group-*
to each
.btn-group
,
including each one when nesting multiple groups.
<template>
<div>
<mdb-btn-group size="lg">
<mdb-btn color="unique" size="lg">Left</mdb-btn>
<mdb-btn color="unique" size="lg">Middle</mdb-btn>
<mdb-btn color="unique" size="lg">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn color="unique">Left</mdb-btn>
<mdb-btn color="unique">Middle</mdb-btn>
<mdb-btn color="unique">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group size="sm">
<mdb-btn color="unique" size="sm">Left</mdb-btn>
<mdb-btn color="unique" size="sm">Middle</mdb-btn>
<mdb-btn color="unique" size="sm">Right</mdb-btn>
</mdb-btn-group>
</div>
</template>
<script>
import { mdbBtn, mdbBtnGroup } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup
}
}
</script>
<style>
.btn-group-lg .btn, .btn-group-sm .btn {
border-radius: 2px;
}
</style>
Nesting
Place a .btn-group
within another .btn-group
when you want dropdown menus mixed with a
series of buttons.
<template>
<mdb-btn-group>
<mdb-btn color="info">1</mdb-btn>
<mdb-btn color="info">2</mdb-btn>
<mdb-btn-group>
<mdb-dropdown>
<mdb-dropdown-toggle color="info" slot="toggle">Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu color="info">
<mdb-dropdown-item>Dropdown link</mdb-dropdown-item>
<mdb-dropdown-item>Dropdown link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-btn-group>
</mdb-btn-group>
</template>
<script>
import { mdbBtn, mdbBtnGroup, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup,
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<template>
<div>
<mdb-btn-group vertical>
<mdb-btn color="amber" class="mb-0">Button</mdb-btn>
<mdb-btn color="amber" class="mb-0">Button</mdb-btn>
<mdb-btn color="amber" class="mb-0">Button</mdb-btn>
<mdb-btn color="amber" class="mb-0">Button</mdb-btn>
<mdb-btn color="amber" class="mb-0">Button</mdb-btn>
<mdb-btn color="amber">Button</mdb-btn>
</mdb-btn-group>
<mdb-btn-group vertical class="ml-5">
<mdb-btn color="indigo" class="ml-0 mb-0">Button</mdb-btn>
<mdb-btn color="indigo" class="ml-0 mb-0">Button</mdb-btn>
<mdb-btn-group>
<mdb-dropdown>
<mdb-dropdown-toggle color="indigo" slot="toggle">Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu color="indigo">
<mdb-dropdown-item>Dropdown link</mdb-dropdown-item>
<mdb-dropdown-item>Dropdown link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-btn-group>
<mdb-btn-group>
<mdb-dropdown>
<mdb-dropdown-toggle color="indigo" slot="toggle">Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu color="indigo">
<mdb-dropdown-item>Dropdown link</mdb-dropdown-item>
<mdb-dropdown-item>Dropdown link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-btn-group>
<mdb-btn color="indigo" class="ml-0 mb-0">Button</mdb-btn>
<mdb-btn color="indigo" class="ml-0">Button</mdb-btn>
</mdb-btn-group>
</div>
</template>
<script>
import { mdbBtn, mdbBtnGroup, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup,
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle
}
}
</script>
Checkbox and radio button group MDB Pro component
<template>
<mdb-container>
<mdb-btn-group>
<mdb-btn color="mdb-color" @click.native="toggleActiveState2" :active="active2">Pre-checked</mdb-btn>
<mdb-btn color="mdb-color" @click.native="toggleActiveState3" :active="active3">Check</mdb-btn>
<mdb-btn color="mdb-color" @click.native="toggleActiveState4" :active="active4">Check</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn color="light-blue" @click.native="toggleActiveState5" :active="active5">Preselected</mdb-btn>
<mdb-btn color="light-blue" @click.native="toggleActiveState6" :active="active6">Radio</mdb-btn>
<mdb-btn color="light-blue" @click.native="toggleActiveState7" :active="active7">Radio</mdb-btn>
</mdb-btn-group>
</mdb-container>
</template>
<script>
import { mdbBtn, mdbBtnGroup, mdbContainer } from 'mdbvue';
export default {
name: 'ButtonsGroupProPage',
components: {
mdbBtn,
mdbBtnGroup,
mdbContainer,
},
data() {
return {
active: false,
active2: true,
active3: false,
active4: false,
active5: true,
active6: false,
active7: false
};
},
methods: {
toggleActiveState() {
this.active = !this.active;
},
toggleActiveState2() {
this.active2 = !this.active2;
},
toggleActiveState3() {
this.active3 = !this.active3;
},
toggleActiveState4() {
this.active4 = !this.active4;
},
toggleActiveState5() {
this.active5 = true;
this.active6 = false;
this.active7 = false;
},
toggleActiveState6() {
this.active5 = false;
this.active6 = true;
this.active7 = false;
},
toggleActiveState7() {
this.active5 = false;
this.active6 = false;
this.active7 = true;
}
}
}
</script>
Rounded button group MDB Pro component
<template>
<div>
<mdb-btn-group>
<mdb-btn color="pink" rounded>Left</mdb-btn>
<mdb-btn color="pink" rounded>Middle</mdb-btn>
<mdb-btn color="pink" rounded>Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn gradient="purple" rounded>Left</mdb-btn>
<mdb-btn gradient="purple" rounded>Middle</mdb-btn>
<mdb-btn gradient="purple" rounded>Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn color="purple" icon="star" iconClass="fa-sm" rounded>Left</mdb-btn>
<mdb-btn color="purple" icon="heart" iconClass="fa-sm" rounded>Middle</mdb-btn>
<mdb-btn color="purple" icon="user" iconClass="fa-sm" rounded>Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn outline="deep-purple" icon="star" iconClass="fa-sm" rounded>Left</mdb-btn>
<mdb-btn outline="deep-purple" icon="heart" iconClass="fa-sm" rounded>Middle</mdb-btn>
<mdb-btn outline="deep-purple" icon="user" iconClass="fa-sm" rounded>Right</mdb-btn>
</mdb-btn-group>
</div>
</template>
<script>
import { mdbBtn, mdbBtnGroup } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup
}
}
</script>
<style scoped>
.btn .fas.fa-sm {
font-size: 1rem;
margin-top: -5px;
}
</style>
Additional button group
<template>
<div>
<mdb-btn-group>
<mdb-btn color="cyan">Left</mdb-btn>
<mdb-btn color="cyan">Middle</mdb-btn>
<mdb-btn color="cyan">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn gradient="aqua">Left</mdb-btn>
<mdb-btn gradient="aqua">Middle</mdb-btn>
<mdb-btn gradient="aqua">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn color="indigo" fab icon="instagram" iconClass="fa-sm">Left</mdb-btn>
<mdb-btn color="indigo" fab icon="twitter" iconClass="fa-sm">Middle</mdb-btn>
<mdb-btn color="indigo" fab icon="snapchat-ghost" iconClass="fa-sm">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn outline="mdb-color" darkWaves fab icon="instagram" iconClass="fa-sm">Left</mdb-btn>
<mdb-btn outline="mdb-color" darkWaves fab icon="twitter" iconClass="fa-sm">Middle</mdb-btn>
<mdb-btn outline="mdb-color" darkWaves fab icon="snapchat-ghost" iconClass="fa-sm">Right</mdb-btn>
</mdb-btn-group>
</div>
</template>
<script>
import { mdbBtn, mdbBtnGroup } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup
}
}
</script>
<style scoped>
.btn .fas.fa-sm {
font-size: 1rem;
margin-top: -5px;
}
</style>
Multicolored button group
<template>
<div>
<mdb-btn-group>
<mdb-btn color="primary" size="lg">Left</mdb-btn>
<mdb-btn color="warning" size="lg">Middle</mdb-btn>
<mdb-btn color="danger" size="lg">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn color="primary">Left</mdb-btn>
<mdb-btn color="warning">Middle</mdb-btn>
<mdb-btn color="danger">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group>
<mdb-btn color="primary" size="sm">Left</mdb-btn>
<mdb-btn color="warning" size="sm">Middle</mdb-btn>
<mdb-btn color="danger" size="sm">Right</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-group vertical>
<mdb-btn color="primary" class="mb-0">Button</mdb-btn>
<mdb-btn color="pink" class="mb-0">Button</mdb-btn>
<mdb-btn color="success" class="mb-0">Button</mdb-btn>
<mdb-btn color="warning" class="mb-0">Button</mdb-btn>
<mdb-btn color="danger" class="mb-0">Button</mdb-btn>
</mdb-btn-group>
<br><br>
<mdb-btn-toolbar>
<mdb-btn-group class="mr-2">
<mdb-btn color="mdb-color lighten-2">1</mdb-btn>
<mdb-btn color="indigo lighten-2">2</mdb-btn>
<mdb-btn color="blue lighten-2">3</mdb-btn>
<mdb-btn color="light-blue lighten-2">4</mdb-btn>
<mdb-btn color="cyan lighten-2">5</mdb-btn>
</mdb-btn-group>
</mdb-btn-toolbar>
<br>
<mdb-btn-toolbar>
<mdb-btn-group class="mr-2">
<mdb-btn color="mdb-color lighten-2" icon="star" />
<mdb-btn color="indigo lighten-2" icon="heart" />
<mdb-btn color="blue lighten-2" icon="user" />
<mdb-btn color="light-blue lighten-2" fab icon="twitter" />
</mdb-btn-group>
</mdb-btn-toolbar>
</div>
</template>
<script>
import { mdbBtn, mdbBtnGroup, mdbBtnToolbar } from 'mdbvue';
export default {
name: 'ButtonsGroup',
components: {
mdbBtn,
mdbBtnGroup,
mdbBtnToolbar
}
}
</script>
Buttons Group - API
In this section you will find advanced information about the Buttons Group component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
import { mdbBtn, mdbBtnGroup, mdbBtnToolbar } from 'mdbvue';
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag |
String | 'button' |
Changes component's tag | <mdb-btn-group tag="a"> |
size |
String | '' |
Changes component's size | <mdb-btn-group size="lg"> |
vertical |
Boolean |
|
Changes component flex direction | <mdb-btn-group vertical> |