ButtonGroup

Buttons are components which are triggering a desirable user interaction. Easy to customize in terms of size, shape, and color.

Examples of Bootstrap button group use:

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

Multicolored Button Groups

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
    <CDBContainer>
          <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>
    </CDBContainer>
  );
  export default ButtonGroup;
};

Rect Secondary Medium with Space Between

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
    <CDBContainer>
          <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>
    </CDBContainer>
  );
  export default ButtonGroup;
};

Rect Secondary Small

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
    <CDBContainer>
          <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>
    </CDBContainer>
  );
  export default ButtonGroup;
};

Vertical Rect Secondary Large

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

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
    <CDBContainer>
          <CDBBtnGrp vertical 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>
    </CDBContainer>
  );
  export default ButtonGroup;
};

Vertical Rect Secondary Medium

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

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
    <CDBContainer>
          <CDBBtnGrp vertical>
            <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>
    </CDBContainer>
  );
  export default ButtonGroup;
};

Vertical Rect Secondary Small

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

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
    <CDBContainer>
          <CDBBtnGrp vertical 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>
    </CDBContainer>
  );
  export default ButtonGroup;
};

Button Group with Icon

import React from "react";
import { CDBBtnGrp, CDBBtn, Icon, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
   <CDBContainer>
         <CDBBtnGrp>
            <CDBBtn color="primary"><CDBIcon fab icon="twitter"/></CDBBtn>
            <CDBBtn color="secondary"><CDBIcon fab icon="facebook"/></CDBBtn>
            <CDBBtn color="success"><CDBIcon fab icon="reddit"/></CDBBtn>
            <CDBBtn color="danger"><CDBIcon fab icon="instagram"/></CDBBtn>
            <CDBBtn color="dark"><CDBIcon fab icon="imdb"/></CDBBtn>
            <CDBBtn color="warning"><CDBIcon fab icon="stack-overflow"/></CDBBtn>
          </CDBBtnGrp>
    </CDBContainer>
  );
  export default ButtonGroup;
};

Button Group with Dropdown

Use the CDBDropDown component to add dropdowns to Button Groups.

import React from "react";
import { CDBBtnGrp, CDBIcon, CDBBtn, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBContainer } from "cdbreact";
const ButtonGroup = () => {
  return (
    <CDBContainer>
          <CDBBtnGrp>
            <CDBBtn color="primary">click me</CDBBtn>
            <CDBBtn color="secondary">click me</CDBBtn>
            <CDBBtn color="success">click me</CDBBtn>
          </CDBBtnGrp>
          <CDBBtnGrp>
            <CDBDropDown>
              <CDBDropDownToggle color="warning">Dropdown<Icon fas icon="caret-down"/></CDBDropDownToggle>
              <CDBDropDownMenu dropright>
                <CDBDropDownItem>Action 1</CDBDropDownItem>
                <CDBDropDownItem>Action 2</CDBDropDownItem>
              </CDBDropDownMenu>
            </CDBDropDown>
          </CDBBtnGrp>
    </CDBContainer>
  );
  export default ButtonGroup;
};

API

In this section you will find advanced information about the ButtonGroup component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast ButtonGroup Import Statement

You need to import the Contrast ButtonGroup component first before using it. Then import any other needed components.

import { CDBBtnGrp, Icon, CDBBtn, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBContainer } from "cdbreact";

API Reference: Contrast ButtonGroup Properties

The table below shows the configuration options of the CDBBtnGrp component.