Angular Bootstrap button group

Angular Button 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

Angular Bootstrap button groups are buttons grouped together in a single line with no space between them. They can be grouped both vertically and horizontally.

This solution allows you to put a number of options the users can choose from.

Examples of Angular 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

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="primary" class="waves-light" mdbWavesEffect>
    Left
  </button>
  <button mdbBtn type="button" color="primary" class="waves-light" mdbWavesEffect>
    Middle
  </button>
  <button mdbBtn type="button" color="primary" class="waves-light" mdbWavesEffect>
    Right
  </button>
</div>

Button toolbar

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      1
    </button>
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      2
    </button>
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      3
    </button>
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      4
    </button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      5
    </button>
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      6
    </button>
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      7
    </button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button mdbBtn type="button" color="default" class="waves-light" mdbWavesEffect>
      8
    </button>
  </div>
</div>

Button group sizing

<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="unique" size="lg" class="waves-light" mdbWavesEffect>
    Left
  </button>
  <button mdbBtn type="button" color="unique" size="lg" class="waves-light" mdbWavesEffect>
    Middle
  </button>
  <button mdbBtn type="button" color="unique" size="lg" class="waves-light" mdbWavesEffect>
    Right
  </button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="unique" class="waves-light" mdbWavesEffect>
    Left
  </button>
  <button mdbBtn type="button" color="unique" class="waves-light" mdbWavesEffect>
    Middle
  </button>
  <button mdbBtn type="button" color="unique" class="waves-light" mdbWavesEffect>
    Right
  </button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="unique" size="sm" class="waves-light" mdbWavesEffect>
    Left
  </button>
  <button mdbBtn type="button" color="unique" size="sm" class="waves-light" mdbWavesEffect>
    Middle
  </button>
  <button mdbBtn type="button" color="unique" size="sm" class="waves-light" mdbWavesEffect>
    Right
  </button>
</div>

Button group nesting

Dropdown link Dropdown link 
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button mdbBtn type="button" color="info" class="waves-light" mdbWavesEffect>1</button>
  <button mdbBtn type="button" color="info" class="waves-light" mdbWavesEffect>2</button>

  <div class="btn-group" mdbDropdown>
    <button
      mdbDropdownToggle
      type="button"
      mdbBtn
      color="info"
      class="dropdown-toggle waves-light"
      mdbWavesEffect
    >
      Dropdown
    </button>

    <div class="dropdown-menu dropdown-primary">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Button group vertical variation

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button mdbBtn type="button" color="amber" class="waves-light ml-0" mdbWavesEffect>
    Button
  </button>
  <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>
    Button
  </button>
  <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>
    Button
  </button>
  <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>
    Button
  </button>
  <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>
    Button
  </button>
  <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>
    Button
  </button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button mdbBtn type="button" color="indigo" class="waves-light ml-0" mdbWavesEffect>
    Button
  </button>
  <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect>
    Button
  </button>
  <div class="btn-group" mdbDropdown>
    <button mdbDropdownToggle type="button" mdbBtn color="indigo" class="dropdown-toggle waves-light" mdbWavesEffect>
      Dropdown
    </button>

    <div class="dropdown-menu dropdown-primary">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect>
    Button
  </button>
  <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect>
    Button
  </button>
  <div class="btn-group" mdbDropdown>
    <button mdbDropdownToggle type="button" mdbBtn color="indigo" class="dropdown-toggle waves-light" mdbWavesEffect>
      Dropdown
    </button>

    <div class="dropdown-menu dropdown-primary">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" mdbDropdown>
    <button mdbDropdownToggle type="button" mdbBtn color="indigo" class="dropdown-toggle waves-light" mdbWavesEffect>
      Dropdown
    </button>

    <div class="dropdown-menu dropdown-primary">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" mdbDropdown>
    <button mdbDropdownToggle type="button" mdbBtn color="indigo" class="dropdown-toggle waves-light" mdbWavesEffect>
      Dropdown
    </button>

    <div class="dropdown-menu dropdown-primary">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Angular Button Group - API

In this section you will find informations about button group and its required modules and available inputs, outputs, methods and events.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

import { ButtonsModule, WavesModule } from 'ng-uikit-pro-standard'
import { ButtonsModule, WavesModule } from 'angular-bootstrap-md'
Import example Modules list

Angular Button Group - examples & customization

Checkbox and radio button group MDB Pro component 

<div class="btn-group">
  <label mdbBtn color="mdb-color" [(ngModel)]="checkModel.left" mdbCheckbox mdbWavesEffect>
    Pre-checked
  </label>
  <label mdbBtn color="mdb-color" [(ngModel)]="checkModel.middle" mdbCheckbox mdbWavesEffect>
    Check
  </label>
  <label mdbBtn color="mdb-color" [(ngModel)]="checkModel.right" mdbCheckbox mdbWavesEffect>
    Check
  </label>
</div>

<div class="btn-group">
  <label mdbBtn color="light-blue" [(ngModel)]="radioModel" mdbRadio="Left" mdbWavesEffect>
    Preselected
  </label>
  <label mdbBtn color="light-blue" [(ngModel)]="radioModel" mdbRadio="Middle" mdbWavesEffect>
    Radio
  </label>
  <label mdbBtn color="light-blue" [(ngModel)]="radioModel" mdbRadio="Right" mdbWavesEffect>
    Radio
  </label>
</div>
import { Component } from '@angular/core';

@Component({
  selector: 'checkbox-radio-group',
  templateUrl: './checkbox-radio-group.component.html',
})
export class CheckboxRadioGroup {
  public checkModel = { left: true, middle: false, right: false };
  public radioModel = 'Left';
}

Rounded button group MDB Pro component 

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="pink" rounded="true" class="waves-light" mdbWavesEffect>
    Left
  </button>
  <button mdbBtn type="button" color="pink" rounded="true" class="waves-light" mdbWavesEffect>
    Middle
  </button>
  <button mdbBtn type="button" color="pink" rounded="true" class="waves-light" mdbWavesEffect>
    Right
  </button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" gradient="purple" rounded="true" class="waves-light" mdbWavesEffect>
    Left
  </button>
  <button mdbBtn type="button" gradient="purple" rounded="true" class="waves-light" mdbWavesEffect>
    Middle
  </button>
  <button mdbBtn type="button" gradient="purple" rounded="true" class="waves-light" mdbWavesEffect>
    Right
  </button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="purple" rounded="true" class="waves-light" mdbWavesEffect>
    <mdb-icon fas icon="star" class="mr-1"></mdb-icon>Left
  </button>
  <button mdbBtn type="button" color="purple" rounded="true" class="waves-light" mdbWavesEffect>
    <mdb-icon fas icon="heart" class="mr-1"></mdb-icon>Middle
  </button>
  <button mdbBtn type="button" color="purple" rounded="true" class="waves-light" mdbWavesEffect>
    <mdb-icon fas icon="user" class="mr-1"></mdb-icon>Right
  </button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="deep-purple" rounded="true" outline="true" class="waves-light" mdbWavesEffect>
    <mdb-icon fas icon="anchor" class="mr-1"></mdb-icon>Left
  </button>
  <button mdbBtn type="button" color="deep-purple" rounded="true" outline="true" class="waves-light" mdbWavesEffect>
    <mdb-icon far icon="sun" class="mr-1"></mdb-icon>Middle
  </button>
  <button mdbBtn type="button" color="deep-purple" rounded="true" outline="true" class="waves-light" mdbWavesEffect>
    <mdb-icon fas icon="user" class="mr-1"></mdb-icon>Right
  </button>
</div>

Additional button group MDB Pro component 

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="cyan" class="waves-light" mdbWavesEffect>Left</button>
  <button mdbBtn type="button" color="cyan" class="waves-light" mdbWavesEffect>Middle</button>
  <button mdbBtn type="button" color="cyan" class="waves-light" mdbWavesEffect>Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" gradient="aqua" class="waves-light" mdbWavesEffect>Left</button>
  <button mdbBtn type="button" gradient="aqua" class="waves-light" mdbWavesEffect>Middle</button>
  <button mdbBtn type="button" gradient="aqua" class="waves-light" mdbWavesEffect>Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect>
    <mdb-icon fab icon="instagram" class="mr-1"></mdb-icon>Left
  </button>
  <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect>
    <mdb-icon fab icon="twitter" class="mr-1"></mdb-icon>Middle
  </button>
  <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect>
    <mdb-icon fab icon="snapchat-ghost" class="mr-1"></mdb-icon>Right
  </button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="mdb-color" outline="true" class="waves-light" mdbWavesEffect>
    <mdb-icon fas icon="car" class="mr-1"></mdb-icon>Left
  </button>
  <button mdbBtn type="button" color="mdb-color" outline="true" class="waves-light" mdbWavesEffect>
    <mdb-icon icon="plane" class="mr-1"></mdb-icon>Middle
  </button>
  <button mdbBtn type="button" color="mdb-color" outline="true" class="waves-light" mdbWavesEffect>
    <mdb-icon fas icon="train" class="mr-1"></mdb-icon>Right
  </button>
</div>

Multicolored button group

<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="primary" size="lg" class="waves-light" mdbWavesEffect>Left</button>
  <button mdbBtn type="button" color="warning" size="lg" class="waves-light" mdbWavesEffect>Middle</button>
  <button mdbBtn type="button" color="danger" size="lg" class="waves-light" mdbWavesEffect>Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="primary" class="waves-light" mdbWavesEffect>Left</button>
  <button mdbBtn type="button" color="warning" class="waves-light" mdbWavesEffect>Middle</button>
  <button mdbBtn type="button" color="danger" class="waves-light" mdbWavesEffect>Right</button>
</div>

<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
  <button mdbBtn type="button" color="primary" size="sm" class="waves-light" mdbWavesEffect>Left</button>
  <button mdbBtn type="button" color="warning" size="sm" class="waves-light" mdbWavesEffect>Middle</button>
  <button mdbBtn type="button" color="danger" size="sm" class="waves-light" mdbWavesEffect>Right</button>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button mdbBtn type="button" color="primary" class="waves-light ml-0" mdbWavesEffect>Button</button>
  <button mdbBtn type="button" color="pink" class="waves-light" mdbWavesEffect>Button</button>
  <button mdbBtn type="button" color="success" class="waves-light" mdbWavesEffect>Button</button>
  <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>Button</button>
  <button mdbBtn type="button" color="red" class="waves-light" mdbWavesEffect>Button</button>
</div>

<div class="btn-toolbar mb-4" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button mdbBtn type="button" color="mdb-color" class="waves-light" mdbWavesEffect>1</button>
    <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect>2</button>
    <button mdbBtn type="button" color="blue" class="waves-light" mdbWavesEffect>3</button>
    <button mdbBtn type="button" color="light-blue" class="waves-light" mdbWavesEffect>4</button>
    <button mdbBtn type="button" color="cyan" class="waves-light" mdbWavesEffect>5</button>
  </div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button mdbBtn type="button" color="indigo" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star"></mdb-icon></button>
    <button mdbBtn type="button" color="blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="heart"></mdb-icon></button>
    <button mdbBtn type="button" color="light-blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon></button>
    <button mdbBtn type="button" color="cyan" class="waves-light" mdbWavesEffect><mdb-icon fab icon="twitter"></mdb-icon></button>
  </div>
</div>