🤩
Windframe Import Update is finally here.

ButtonGroup

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.

js
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.

js
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

js
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

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.

js
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.

js
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.

js
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

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.

js
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.

js
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.

js
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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBBtnGrp className="myClass" ... />
roleStringgroupChange default component's role<CDBBtnGrp role="group" ... />
sizeStringmediumDetermines buttons size, available values: [sm, lg].<CDBBtnGrp size="lg" ... />
verticalBooleanfalseChanges group orientation to vertical<CDBBtnGrp vertical .../>

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

ad-banner

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