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

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 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.

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.

Dropdown link Dropdown link 
        
            
        <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.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
        
            
        <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>