ButtonGroup

Some features in this component requires CDB React Pro package.Clickhereto try it out.

React Bootstrap 5 ButtonGroup

A button group in React Bootstrap 5 wraps a bunch of buttons into a single line or stack in a vertical column. The Button Group component generates a group to which buttons can be added. Of course, a button group can only have one button selected at any given moment. As a result, selecting a button in a button group deselects all of the other buttons in the group.

The visual look of the buttons on the screen has nothing to do with button groupings. Instead, button groups merely organize the buttons into logical groups. The Button Group component controls whether a group of buttons is chosen or not.

Applications of React Bootstrap 5 button group:

We can see the application of these component on our:

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

Importing the Contrast React Bootstrap 5 ButtonGroup component

Start by importing 'CDBBtnGrp' into your project to use the Contrast React Bootstrap 5 ButtonGroup component.

import { CDBBtnGrp } from "cdbreact";

Basic Button Groups

Alongside the CDBBtnGrp component, we imported the CDBBtn component to create our buttons.

The color prop also affects the Contrast React Bootstrap 5 ButtonGroup, as it gives the buttons in the ButtonGroup a background color, depending on the values passed into the prop.

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";

const ButtonGroup = () => {
  return (
    <CDBContainer>
      <CDBBtnGrp>
        <CDBBtn color="primary">Left</CDBBtn>
        <CDBBtn color="primary">Middle</CDBBtn>
        <CDBBtn color="primary">Right</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 size="md" >
            <CDBBtn  color="primary">click me</CDBBtn>
            <CDBBtn  color="secondary">click me</CDBBtn>
            <CDBBtn  color="success">click me</CDBBtn>
          </CDBBtnGrp>
          <CDBBtnGrp size="md>
            <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

With the Contrast React Bootstrap 5 ButtonGroup you can give every button wrapped up in the CDBButtonGroup component a particular size. This is a lot easier than giving each of the buttons a className to affect the styling.

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.The vertical size prop with a value of large gives the buttons an extra padding at the top and padding at the bottom.

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

The'vertical-size'prop of the Contrast React Bootstrap 5 ButtonGroup is set to medium by default. This vertically stacks the buttons in a button group without adding any top or bottom padding.

import React from "react";
import { CDBBtnGrp, CDBBtn, CDBContainer } from "cdbreact";

const ButtonGroup = () => {
  return (
    <CDBContainer>
          <CDBBtnGrp vertical size="md">
            <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

The vertical size prop of the Contrast React Bootstrap 5 ButtonGroup is also set to tiny, which minimizes the top and bottom paddings in the buttons contained in the CDBButtonGroup.

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

Pro Component

In this section of the tutorial, we also use the CDBIcon component alongside the CDBButtonGroup. You can find more information in our docs about how to use the Contrast React Bootstrap 5 Icon in your project. You swipe the texts in the buttons for an icon with the Contrast React Bootstrap 5 'CDBButtonGroup' component.

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

In this tutorial we also use the CDBIcon for our icons, CDBBtn to create buttons, and the CDBDropdown component to create our dropdowns alongside the CDBButtonGroup component.

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.

Contrast React Bootstrap 5 ButtonGroup Props

API Reference: Contrast ButtonGroup Properties

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

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ButtonToolbar

Box