ButtonGroup

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

Importing the Contrast Angular Bootstrap ButtonGroup Module

To use the Contrast Angular Bootstrap ButtonGroup component in your project you need to import ButtonGroupModule.

typescript

import {ButtongroupModule } from 'cdbangular';

Multicolored Button Groups

Use color prop to give your buttons in your button group a background color.

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

Use the size prop to define how little or large you want the buttons in your button group to be.

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

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

Use the CDBIcon component to have icons in your buttons.

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 Reference: Contrast Angular Bootstrap Button Group Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Breadcrumb component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBBtnGrp component.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
role	String	group	Change default component's role	role="group"
size	String	medium	Determines buttons size, available values: `[sm, lg]`.	size="lg"
vertical	Boolean	false	Changes group orientation to vertical	[vertical]=true

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Box

Collapse