ButtonGroup

Angular Bootstrap ButtonGroup are components that trigger wanted user interactions. Angular Bootstrap Contrast ButtonGroups are easy to customize in terms of their size, shape and color.

Examples of Angular Bootstrap button group use:

• Group of pricing options
• Group of licenses you can purchase on our CDB Pro page

Multicolored Button Groups

html

  <CDBBtnGrp size="lg">
    <CDBBtn color="primary">click me</CDBBtn>
    <CDBBtn color="secondary">click me</CDBBtn>
    <CDBBtn color="success">click me</CDBBtn>
    <CDBBtn color="danger">click me</CDBBtn>
    <CDBBtn color="dark">click me</CDBBtn>
    <CDBBtn color="warning">click me</CDBBtn>
  </CDBBtnGrp>

Rect Secondary Medium with Space Between

html

  <CDBBtnGrp>
    <CDBBtn color="primary">click me</CDBBtn>
    <CDBBtn color="secondary">click me</CDBBtn>
    <CDBBtn color="success">click me</CDBBtn>
  </CDBBtnGrp>
  <CDBBtnGrp>
    <CDBBtn color="danger">click me</CDBBtn>
    <CDBBtn color="dark">click me</CDBBtn>
    <CDBBtn color="warning">click me</CDBBtn>
  </CDBBtnGrp>

Rect Secondary Small

Simply add the disabled boolean attribute to CDBButtonGroup

html

  <CDBBtnGrp size="sm">
    <CDBBtn color="primary">click me</CDBBtn>
    <CDBBtn color="secondary">click me</CDBBtn>
    <CDBBtn color="success">click me</CDBBtn>
    <CDBBtn color="danger">click me</CDBBtn>
    <CDBBtn color="dark">click me</CDBBtn>
    <CDBBtn color="warning">click me</CDBBtn>
  </CDBBtnGrp>

Vertical Rect Secondary Large

Make a set of buttons appear vertically stacked rather than horizontally.

html

  <CDBBtnGrp [vertical]=true size="lg">
    <CDBBtn color="primary">click me</CDBBtn>
    <CDBBtn color="secondary">click me</CDBBtn>
    <CDBBtn color="success">click me</CDBBtn>
    <CDBBtn color="danger">click me</CDBBtn>
    <CDBBtn color="dark">click me</CDBBtn>
    <CDBBtn color="warning">click me</CDBBtn>
  </CDBBtnGrp>

Vertical Rect Secondary Medium

Make a set of buttons appear vertically stacked rather than horizontally.

html

  <CDBBtnGrp [vertical]=true>
    <CDBBtn color="primary">click me</CDBBtn>
    <CDBBtn color="secondary">click me</CDBBtn>
    <CDBBtn color="success">click me</CDBBtn>
    <CDBBtn color="danger">click me</CDBBtn>
    <CDBBtn color="dark">click me</CDBBtn>
    <CDBBtn color="warning">click me</CDBBtn>
  </CDBBtnGrp>

Vertical Rect Secondary Small

Make a set of buttons appear vertically stacked rather than horizontally.

Simply add the disabled boolean attribute to CDBButtonGroup

html

  <CDBBtnGrp [vertical]=true size="sm">
    <CDBBtn color="primary">click me</CDBBtn>
    <CDBBtn color="secondary">click me</CDBBtn>
    <CDBBtn color="success">click me</CDBBtn>
    <CDBBtn color="danger">click me</CDBBtn>
    <CDBBtn color="dark">click me</CDBBtn>
    <CDBBtn color="warning">click me</CDBBtn>
  </CDBBtnGrp>

Button Group with Icon

html

 <CDBBtnGrp>
    <CDBBtn color="primary"><CDBIcon [fab]=true icon="twitter"/></CDBBtn>
    <CDBBtn color="secondary"><CDBIcon [fab]=true icon="facebook"/></CDBBtn>
    <CDBBtn color="success"><CDBIcon [fab]=true icon="reddit"/></CDBBtn>
    <CDBBtn color="danger"><CDBIcon [fab]=true icon="instagram"/></CDBBtn>
    <CDBBtn color="dark"><CDBIcon [fab]=true icon="imdb"/></CDBBtn>
    <CDBBtn color="warning"><CDBIcon [fab]=true icon="stack-overflow"/></CDBBtn>
  </CDBBtnGrp>

Button Group with Dropdown

Use the CDBDropDown component to add dropdowns to Button Groups.

html

<CDBBtnGrp>
    <CDBBtn color="primary">click me</CDBBtn>
    <CDBBtn color="secondary">click me</CDBBtn>
    <CDBBtn color="success">click me</CDBBtn>
</CDBBtnGrp>
<CDBBtnGrp class="ml-2">
    <CDBDropDown>
        <CDBDropDownToggle color="warning" [caretDropRight]=true (click)="menu.toggleDropdown($event)">Dropdown
            <!-- <CDBIcon [fas]=true icon="caret-down"></CDBIcon> -->
        </CDBDropDownToggle>
        <CDBDropDownMenu #menu="cdbDropdownMenu" placement="right">
            <CDBDropDownItem>Action 1</CDBDropDownItem>
            <CDBDropDownItem>Action 2</CDBDropDownItem>
        </CDBDropDownMenu>
    </CDBDropDown>
</CDBBtnGrp>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast Button Group Bootstrap Modules used

import {ButtongroupModule } from 'cdbangular';

API Reference: Contrast Button Group Bootstrap Inputs

The table below shows the possible input of the Button Group component.