Vue Bootstrap Buttons Group
Vue Buttons Group - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
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
Wrap a series of buttons using role="group" with .btn-group class.
<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
roleand 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-labelledbycan 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
Group the button to the checkboxes using the following code:.
<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
Use the .btn-rounded class on radio buttons to get rounded edges.
<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
Additional examples of button groups with gradient, icons or shadow.
<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
Use different colors in buttons 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>
Vue 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
<script>
import { mdbBtn, mdbBtnGroup, mdbBtnToolbar } from 'mdbvue';
</script>
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> |