Button group
Vue Bootstrap 5 Button group component
Group a series of buttons together on a single line with the Vue button group.
Note: Read the API tab to find all available options and advanced customization
Basic example
Wrap a series of buttons with MDBBtn in MDBBtnGroup.
<template>
<MDBBtnGroup aria-label="Basic example">
<MDBBtn color="primary">Left</MDBBtn>
<MDBBtn color="primary">Middle</MDBBtn>
<MDBBtn color="primary">Right</MDBBtn>
</MDBBtnGroup>
</template>
<script>
import { MDBBtnGroup, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtnGroup,
MDBBtn,
},
};
</script>
Ensure correct role and provide a label:
In 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 a
role="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 as aria-labelledby can also be
used.
These classes can also be added to links. Use the .active class to highlight a
link.
<template>
<MDBBtnGroup aria-label="Basic example">
<MDBBtn tag="a" href="#!" color="primary" class="active">Active link</MDBBtn>
<MDBBtn tag="a" href="#!" color="primary">Link</MDBBtn>
<MDBBtn tag="a" href="#!" color="primary">Link</MDBBtn>
</MDBBtnGroup>
</template>
<script>
import { MDBBtnGroup, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtnGroup,
MDBBtn,
},
};
</script>
Outlined styles
<template>
<MDBBtnGroup class="shadow-0">
<MDBBtn outline="secondary">Left</MDBBtn>
<MDBBtn outline="secondary">Middle</MDBBtn>
<MDBBtn outline="secondary">Right</MDBBtn>
</MDBBtnGroup>
</template>
<script>
import { MDBBtnGroup, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtnGroup,
MDBBtn,
},
};
</script>
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>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<MDBBtnGroup class="me-2" aria-label="First group">
<MDBBtn color="primary">1</MDBBtn>
<MDBBtn color="primary">2</MDBBtn>
<MDBBtn color="primary">3</MDBBtn>
<MDBBtn color="primary">4</MDBBtn>
</MDBBtnGroup>
<MDBBtnGroup class="me-2" aria-label="Second group">
<MDBBtn color="primary">5</MDBBtn>
<MDBBtn color="primary">6</MDBBtn>
<MDBBtn color="primary">7</MDBBtn>
</MDBBtnGroup>
<MDBBtnGroup aria-label="Third group">
<MDBBtn color="primary">8</MDBBtn>
</MDBBtnGroup>
</div>
</template>
<script>
import { MDBBtnGroup, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtnGroup,
MDBBtn,
},
};
</script>
Sizing
Instead of applying button sizing classes to every button in a group, just add
size to each MDBBtnGroup, including each one when nesting multiple
groups.
<template>
<!-- Large -->
<MDBBtnGroup size="lg" aria-label="Basic example">
<MDBBtn color="primary">Left</MDBBtn>
<MDBBtn color="primary">Middle</MDBBtn>
<MDBBtn color="primary">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<!-- Standard -->
<MDBBtnGroup aria-label="Basic example">
<MDBBtn color="primary">Left</MDBBtn>
<MDBBtn color="primary">Middle</MDBBtn>
<MDBBtn color="primary">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<!-- Small -->
<MDBBtnGroup size="sm" aria-label="Basic example">
<MDBBtn color="primary">Left</MDBBtn>
<MDBBtn color="primary">Middle</MDBBtn>
<MDBBtn color="primary">Right</MDBBtn>
</MDBBtnGroup>
</template>
<script>
import { MDBBtnGroup, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtnGroup,
MDBBtn,
},
};
</script>
Nesting
Place a MDBBtnGroup within another
MDBBtnGroup when you want dropdown menus mixed with a
series of buttons.
<template>
<MDBBtnGroup aria-label="Button group with nested dropdown">
<MDBBtn color="primary">2</MDBBtn>
<MDBBtn color="primary">1</MDBBtn>
<MDBBtnGroup id="dropdown-target">
<MDBBtn
color="primary"
v-on:click="dropdown = !dropdown"
class="dropdown-toggle"
>Dropdown</MDBBtn
>
<MDBDropdown v-model="dropdown" target="#dropdown-target">
<MDBDropdownMenu aria-labelledby="dropdownMenuButton">
<MDBDropdownItem href="#">Dropdown link</MDBDropdownItem>
<MDBDropdownItem href="#">Dropdown link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBBtnGroup>
</MDBBtnGroup>
</template>
<script>
import { MDBBtnGroup, MDBBtn, MDBDropdown, MDBDropdownMenu, MDBDropdownItem } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBBtnGroup,
MDBBtn,
MDBDropdown,
MDBDropdownMenu,
MDBDropdownItem
},
setup() {
const dropdown = ref(false);
return {
dropdown
}
}
};
</script>
Vertical variation
<template>
<MDBBtnGroup vertical aria-label="Vertical button group">
<MDBBtn color="primary">Button</MDBBtn>
<MDBBtn color="primary">Button</MDBBtn>
<MDBBtn color="primary">Button</MDBBtn>
<MDBBtn color="primary">Button</MDBBtn>
<MDBBtn color="primary">Button</MDBBtn>
<MDBBtn color="primary">Button</MDBBtn>
</MDBBtnGroup>
</template>
<script>
import { MDBBtnGroup, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtnGroup,
MDBBtn,
},
};
</script>
Colors
<template>
<MDBBtnGroup class="shadow-0">
<MDBBtn color="light">Left</MDBBtn>
<MDBBtn color="light">Middle</MDBBtn>
<MDBBtn color="light">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<MDBBtnGroup class="shadow-0">
<MDBBtn color="link">Left</MDBBtn>
<MDBBtn color="link">Middle</MDBBtn>
<MDBBtn color="link">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<MDBBtnGroup>
<MDBBtn color="primary">Left</MDBBtn>
<MDBBtn color="primary">Middle</MDBBtn>
<MDBBtn color="primary">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<MDBBtnGroup>
<MDBBtn color="success">Left</MDBBtn>
<MDBBtn color="success">Middle</MDBBtn>
<MDBBtn color="success">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<MDBBtnGroup>
<MDBBtn color="danger">Left</MDBBtn>
<MDBBtn color="danger">Middle</MDBBtn>
<MDBBtn color="danger">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<MDBBtnGroup>
<MDBBtn color="warning">Left</MDBBtn>
<MDBBtn color="warning">Middle</MDBBtn>
<MDBBtn color="warning">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<MDBBtnGroup>
<MDBBtn color="info">Left</MDBBtn>
<MDBBtn color="info">Middle</MDBBtn>
<MDBBtn color="info">Right</MDBBtn>
</MDBBtnGroup>
<br />
<br />
<MDBBtnGroup>
<MDBBtn color="dark">Left</MDBBtn>
<MDBBtn color="dark">Middle</MDBBtn>
<MDBBtn color="dark">Right</MDBBtn>
</MDBBtnGroup>
</template>
<script>
import { MDBBtnGroup, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtnGroup,
MDBBtn,
},
};
</script>
Button group - API
Import
<script>
import {
MDBBtnGroup
} from 'mdb-vue-ui-kit';
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
size |
String | "" |
Changes button group size |
vertical |
Boolean | false |
Changes button group direction to vertical |
role |
String | "group" |
Defines button groups role |
tag |
String | "div" |
Defines button group tag |