React Bootstrap Button group

React Button group - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap 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 see on our MDB Pro page

See the following button groups examples:

Basic example

Wrap a series of buttons with <MDBBtnGroup>. 

        
            
        import React from "react";
        import { 
          MDBBtn, 
          MDBBtnGroup, 
          MDBDropdown, 
          MDBDropdownToggle, 
          MDBDropdownMenu, 
          MDBDropdownItem 
        } from "mdbreact";

        const BtnGroupPage = () => {
          return (
            <MDBBtnGroup>
              <MDBBtn color="info" size="lg">1</MDBBtn>
              <MDBBtn color="info" size="lg">2</MDBBtn>
              <MDBBtnGroup>
                <MDBDropdown>
                  <MDBDropdownToggle caret color="info" className="h-100">
                    Dropdown
                  </MDBDropdownToggle>
                  <MDBDropdownMenu basic color="info">
                    <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                    <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBBtnGroup>
            </MDBBtnGroup>
          )
        }

        export default BtnGroupPage;

Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. 

        
            
        import React from "react";
        import { MDBBtn, MDBBtnGroup } from "mdbreact";

        const BtnGroupPage = () => {
          return (
            <div 
              className="btn-toolbar" 
              role="toolbar" 
              aria-label="Toolbar with button groups"
            >
              <MDBBtnGroup className="mr-2">
                <MDBBtn>1</MDBBtn>
                <MDBBtn>2</MDBBtn>
                <MDBBtn>3</MDBBtn>
                <MDBBtn>4</MDBBtn>
              </MDBBtnGroup>
              <MDBBtnGroup className="mr-2">
                <MDBBtn>5</MDBBtn>
                <MDBBtn>6</MDBBtn>
                <MDBBtn>7</MDBBtn>
              </MDBBtnGroup>
              <MDBBtnGroup>
                <MDBBtn>8</MDBBtn>
              </MDBBtnGroup>
            </div>
          )
        }

        export default BtnGroupPage;

Sizing

Instead of applying button sizing classes to every button in a group, just add size prop to each <MDBBtnGroup>, including each one when nesting multiple groups. 

        
            
        import React from "react";
        import { MDBBtn, MDBBtnGroup, MDBCol, MDBRow } from "mdbreact";

        const BtnGroupPage = () => {
          return (
            <MDBRow>
              <MDBCol md='12' className="mb-4">
                <MDBBtnGroup size="lg">
                  <MDBBtn color="unique">Left</MDBBtn>
                  <MDBBtn color="unique">Middle</MDBBtn>
                  <MDBBtn color="unique">Right</MDBBtn>
                </MDBBtnGroup>
              </MDBCol>
              <MDBCol md='12' className="mb-4">
                <MDBBtnGroup>
                  <MDBBtn color="unique">Left</MDBBtn>
                  <MDBBtn color="unique">Middle</MDBBtn>
                  <MDBBtn color="unique">Right</MDBBtn>
                </MDBBtnGroup>
              </MDBCol>
              <MDBCol md='12' className="mb-4">
                <MDBBtnGroup size="sm">
                  <MDBBtn color="unique">Left</MDBBtn>
                  <MDBBtn color="unique">Middle</MDBBtn>
                  <MDBBtn color="unique">Right</MDBBtn>
                </MDBBtnGroup>
              </MDBCol>
            </MDBRow>
          )
        }

        export default BtnGroupPage;

Nesting

Place a <MDBBtnGroup> within another <MDBBtnGroup> when you want dropdown menus mixed with a series of buttons.

Dropdown link Dropdown link 
        
            
        import React from "react";
        import { 
          MDBBtn, 
          MDBBtnGroup, 
          MDBDropdown, 
          MDBDropdownToggle, 
          MDBDropdownMenu, 
          MDBDropdownItem 
        } from "mdbreact";

        const BtnGroupPage = () => {
          return (
            <MDBBtnGroup>
              <MDBBtn color="info" size="lg">1</MDBBtn>
              <MDBBtn color="info" size="lg">2</MDBBtn>
              <MDBBtnGroup>
                <MDBDropdown>
                  <MDBDropdownToggle caret color="info" className="h-100">
                    Dropdown
                  </MDBDropdownToggle>
                  <MDBDropdownMenu basic color="info">
                    <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                    <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBBtnGroup>
            </MDBBtnGroup>
          )
        }

        export default BtnGroupPage;

Vertical variation

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

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
        
            
        import React from "react";
        import { 
          MDBBtn, 
          MDBBtnGroup, 
          MDBDropdown, 
          MDBDropdownToggle, 
          MDBDropdownMenu, 
          MDBDropdownItem, 
          MDBRow, 
          MDBCol, 
        } from "mdbreact";

        const BtnGroupPage = () => {
          return (
            <MDBRow center>
              <MDBCol xl="2" lg="3" md="4" className="mb-md-0 mb-4">
                <MDBBtnGroup vertical>
                  <MDBBtn color="amber" className="ml-0">Button</MDBBtn>
                  <MDBBtn color="amber">Button</MDBBtn>
                  <MDBBtn color="amber">Button</MDBBtn>
                  <MDBBtn color="amber">Button</MDBBtn>
                  <MDBBtn color="amber">Button</MDBBtn>
                  <MDBBtn color="amber">Button</MDBBtn>
                </MDBBtnGroup>
              </MDBCol>
              <MDBCol xl="2" lg="3" md="4">
                <MDBBtnGroup vertical>
                  <MDBBtn color="indigo" className="ml-0">Button</MDBBtn>
                  <MDBBtn color="indigo">Button</MDBBtn>

                  <MDBDropdown className="w-100">
                    <MDBDropdownToggle caret color="indigo" className="m-0">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu basic color="info">
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>

                  <MDBBtn color="indigo">Button</MDBBtn>
                  <MDBBtn color="indigo">Button</MDBBtn>

                  <MDBDropdown className="w-100">
                    <MDBDropdownToggle caret color="indigo" className="m-0 rounded-0">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu basic color="indigo">
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown className="w-100">
                    <MDBDropdownToggle caret color="indigo" className="m-0 rounded-0">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu basic color="indigo">
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBDropdown className="w-100">
                    <MDBDropdownToggle caret color="indigo" className="m-0 rounded-0">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu basic color="indigo">
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                      <MDBDropdownItem>Dropdown link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>

                </MDBBtnGroup>
              </MDBCol>
            </MDBRow>
          )
        }

        export default BtnGroupPage;

Multicolored button group 

        
            

          import React from "react";
          import { 
            MDBBtn, 
            MDBBtnGroup, 
            MDBIcon, 
            MDBCol, 
            MDBRow 
          } from "mdbreact";

          const BtnGroupPage = () => {
            return (
              <MDBRow>
                <MDBCol xl="5" md="6" className="mb-xl-0 mb-4">

                  <MDBBtnGroup size="lg" className="mb-4">
                    <MDBBtn color="primary">Left</MDBBtn>
                    <MDBBtn color="warning">Left</MDBBtn>
                    <MDBBtn color="danger">Left</MDBBtn>
                  </MDBBtnGroup>

                  <MDBBtnGroup className="mb-4">
                    <MDBBtn color="primary">Left</MDBBtn>
                    <MDBBtn color="warning">Left</MDBBtn>
                    <MDBBtn color="danger">Left</MDBBtn>
                  </MDBBtnGroup>

                  <MDBBtnGroup size="sm" className="mb-4">
                    <MDBBtn color="primary">Left</MDBBtn>
                    <MDBBtn color="warning">Left</MDBBtn>
                    <MDBBtn color="danger">Left</MDBBtn>
                  </MDBBtnGroup>

                </MDBCol>

                <MDBCol xl="3" md="12" className="mb-xl-0 mb-4">
                  <MDBBtnGroup vertical>
                    <MDBBtn color="primary" className="ml-0">1</MDBBtn>
                    <MDBBtn color="pink">2</MDBBtn>
                    <MDBBtn color="success">3</MDBBtn>
                    <MDBBtn color="amber">4</MDBBtn>
                    <MDBBtn color="red">5</MDBBtn>
                  </MDBBtnGroup>
                </MDBCol>

                <MDBCol xl="4" md="12">
                  <div className="btn-toolbar mb-4" role="toolbar">
                    <MDBBtnGroup className="mr-2">
                      <MDBBtn color="mdb-color lighten-2">1</MDBBtn>
                      <MDBBtn color="indigo lighten-2">2</MDBBtn>
                      <MDBBtn color="blue lighten-2">3</MDBBtn>
                      <MDBBtn color="light-blue lighten-2">4</MDBBtn>
                      <MDBBtn color="cyan lighten-2">5</MDBBtn>
                    </MDBBtnGroup>
                  </div>
                  <div className="btn-toolbar" role="toolbar">
                    <MDBBtnGroup className="mr-2">
                      <MDBBtn color="indigo lighten-2">
                        <MDBIcon icon="star" />
                      </MDBBtn>
                      <MDBBtn color="blue lighten-2">
                        <MDBIcon icon="heart" />
                      </MDBBtn>
                      <MDBBtn color="light-blue lighten-2">
                        <MDBIcon icon="user" />
                      </MDBBtn>
                      <MDBBtn color="cyan lighten-2">
                        <MDBIcon fab icon="twitter" />
                      </MDBBtn>
                    </MDBBtnGroup>
                  </div>
                </MDBCol>

              </MDBRow>
            )
          }

          export default BtnGroupPage;

React Buttons Group - API

In this section you will find advanced information about the Buttons Group component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

ButtonsGroup is a wrapper component, which can be used to organize your buttons in groups.

        
            
          import {  MDBBadge, MDBChip, MDBChipsInput } from "mdbreact";

API Reference: Button Properties

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

Name Type Default Description Example
action Boolean false Adds btn-action class, works with Cards <MDBBtn active >
active Boolean false Adds active class <MDBBtn active >
block Boolean false Create block level buttons <MDBBtn block >
circle Boolean false Adds btn-circle class, works with stepper <MDBBtn circle >
className String Adds custom classes <MDBBtn className="customClass" >
color String default Determines button color, accepts MDB predefined color classes <MDBBtn color="primary" >
disabled Boolean false Disables button from being clicked <MDBBtn disabled >
download String Adds download attribute with provided url <MDBBtn download="https://link_to_your_file.com" >
flat Boolean false Adds flat effect to button - button without backgorund and borders <MDBBtn flat >
floating Boolean false Adds floating effect to button <MDBBtn floating >
gradient String Adds gradient background to button, accepts MDB predefined gradients <MDBBtn gradient="peach" >
href String Adds href attribute with provided url and converts <button> tag into <a> tag <MDBBtn gradient="peach" >
innerRef Object Allows to pass Ref object, which will attach to rendered button or a DOM element <MDBBtn innerRef={this.buttonRef} >
outline Boolean false Renders button with outline, color property determines outline color <MDBBtn outline >
role String button Adds role attribute to button <MDBBtn role="..." >
rounded Boolean false Adds rounded corners effect to button <MDBBtn rounded >
size String medium Determines button size, available values: [sm, lg], medium by default <MDBBtn size="lg" >
social String Sets background color <MDBBtn social="fb" >
tag String button Changes default tag <MDBBtn tag="a" >
target String _self If used as link, sets target attribute <MDBBtn href="..." target="_blank" >
type String button Adds type attribute to button <MDBBtn type="submit" >

API Reference: ButtonsGroup Properties

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

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