Button group

React Bootstrap 5 Button group component

Group a series of buttons together on a single line with the button group.


Basic example

Wrap a series of buttons with <MDBBtn> in <MDBBtnGroup>.


          import React from 'react';
          import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup aria-label='Basic example'>
                  <MDBBtn>Left</MDBBtn>
                  <MDBBtn>Middle</MDBBtn>
                  <MDBBtn>Right</MDBBtn>
                </MDBBtnGroup>
              </>
            );
          }
        

Ensure correct role and provide a label:
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group" (set by default), while toolbars should have a role="toolbar".
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.

These classes can also be added to links. Use the active property to highlight a link.


          import React from 'react';
          import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup aria-label='Basic example'>
                  <MDBBtn href='#' active>
                    Active link
                  </MDBBtn>
                  <MDBBtn href='#'>Link</MDBBtn>
                  <MDBBtn href='#'>Link</MDBBtn>
                </MDBBtnGroup>
              </>
            );
          }
        

Outlined styles


          import React from 'react';
          import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup shadow='0' aria-label='Basic example'>
                  <MDBBtn color='secondary' outline>
                    Left
                  </MDBBtn>
                  <MDBBtn color='secondary' outline>
                    Middle
                  </MDBBtn>
                  <MDBBtn color='secondary' outline>
                    Right
                  </MDBBtn>
                </MDBBtnGroup>
              </>
            );
          }
        

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 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup toolbar role='toolbar' aria-label='Toolbar with button groups'>
                  <MDBBtnGroup className='me-2' aria-label='First Group'>
                    <MDBBtn>1</MDBBtn>
                    <MDBBtn>2</MDBBtn>
                    <MDBBtn>3</MDBBtn>
                    <MDBBtn>4</MDBBtn>
                  </MDBBtnGroup>
                  <MDBBtnGroup className='me-2' aria-label='Second Group'>
                    <MDBBtn>5</MDBBtn>
                    <MDBBtn>6</MDBBtn>
                    <MDBBtn>7</MDBBtn>
                  </MDBBtnGroup>
                  <MDBBtnGroup aria-label='Third Group'>
                    <MDBBtn>8</MDBBtn>
                  </MDBBtnGroup>
                </MDBBtnGroup>
              </>
            );
          }
        

Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.


          import React from 'react';
          import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup toolbar className='mb-3' role='toolbar' aria-label='Toolbar with button groups'>
                  <MDBBtnGroup className='me-2' aria-label='First group'>
                    <MDBBtn>1</MDBBtn>
                    <MDBBtn>2</MDBBtn>
                    <MDBBtn>3</MDBBtn>
                    <MDBBtn>4</MDBBtn>
                  </MDBBtnGroup>
    
                  <div className='input-group'>
                    <div className='input-group-text' id='btnGroupAddon'>
                      @
                    </div>
                    <input
                      type='text'
                      className='form-control'
                      placeholder='Input group example'
                      aria-label='Input group example'
                      aria-describedby='btnGroupAddon'
                    />
                  </div>
                </MDBBtnGroup>
    
                <MDBBtnGroup className='justify-content-between' toolbar aria-label='Toolbar with button groups'>
                  <MDBBtnGroup aria-label='First group'>
                    <MDBBtn>1</MDBBtn>
                    <MDBBtn>2</MDBBtn>
                    <MDBBtn>3</MDBBtn>
                    <MDBBtn>4</MDBBtn>
                  </MDBBtnGroup>
    
                  <div className='input-group'>
                    <div className='input-group-text' id='btnGroupAddon2'>
                      @
                    </div>
                    <input
                      type='text'
                      className='form-control'
                      placeholder='Input group example'
                      aria-label='Input group example'
                      aria-describedby='btnGroupAddon2'
                    />
                  </div>
                </MDBBtnGroup>
              </>
            );
          }
        

Sizing

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






          import React from 'react';
          import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup size='lg' aria-label='Basic example'>
                  <MDBBtn>Left</MDBBtn>
                  <MDBBtn>Middle</MDBBtn>
                  <MDBBtn>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup aria-label='Basic example'>
                  <MDBBtn>Left</MDBBtn>
                  <MDBBtn>Middle</MDBBtn>
                  <MDBBtn>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup size='sm' aria-label='Basic example'>
                  <MDBBtn>Left</MDBBtn>
                  <MDBBtn>Middle</MDBBtn>
                  <MDBBtn>Right</MDBBtn>
                </MDBBtnGroup>
              </>
            );
          }
        

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.


          import React from 'react';
          import { MDBBtn, MDBBtnGroup, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup aria-label='Button group with nested dropdown'>
                  <MDBBtn>1</MDBBtn>
                  <MDBBtn>2</MDBBtn>
    
                  <MDBBtnGroup>
                    <MDBDropdown>
                      <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                      <MDBDropdownMenu>
                        <MDBDropdownItem>
                          <MDBDropdownLink>Action</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink>Another action</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink>Something else here</MDBDropdownLink>
                        </MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                  </MDBBtnGroup>
                </MDBBtnGroup>
              </>
            );
          }
        

Vertical variation


            import React from 'react';
            import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBBtnGroup vertical aria-label='Vertical button group'>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtn>Button</MDBBtn>
                  </MDBBtnGroup>
                </>
              );
            }
          


            import React from 'react';
            import { MDBBtn, MDBBtnGroup, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBDropdownLink } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBBtnGroup vertical aria-label='Vertical button group'>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtnGroup>
                      <MDBDropdown>
                        <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Another action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Something else here</MDBDropdownLink>
                          </MDBDropdownItem>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBBtnGroup>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtn>Button</MDBBtn>
                    <MDBBtnGroup>
                      <MDBDropdown>
                        <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Another action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Something else here</MDBDropdownLink>
                          </MDBDropdownItem>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBBtnGroup>
                    <MDBBtnGroup>
                      <MDBDropdown>
                        <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Another action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Something else here</MDBDropdownLink>
                          </MDBDropdownItem>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBBtnGroup>
                    <MDBBtnGroup>
                      <MDBDropdown>
                        <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Another action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink>Something else here</MDBDropdownLink>
                          </MDBDropdownItem>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBBtnGroup>
                  </MDBBtnGroup>
                </>
              );
            }
          

Colors
















          import React from 'react';
          import { MDBBtn, MDBBtnGroup } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtnGroup shadow='0'>
                  <MDBBtn color='light'>Left</MDBBtn>
                  <MDBBtn color='light'>Middle</MDBBtn>
                  <MDBBtn color='light'>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup shadow='0'>
                  <MDBBtn color='link'>Left</MDBBtn>
                  <MDBBtn color='link'>Middle</MDBBtn>
                  <MDBBtn color='link'>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup shadow='0'>
                  <MDBBtn>Left</MDBBtn>
                  <MDBBtn>Middle</MDBBtn>
                  <MDBBtn>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup shadow='0'>
                  <MDBBtn color='success'>Left</MDBBtn>
                  <MDBBtn color='success'>Middle</MDBBtn>
                  <MDBBtn color='success'>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup shadow='0'>
                  <MDBBtn color='danger'>Left</MDBBtn>
                  <MDBBtn color='danger'>Middle</MDBBtn>
                  <MDBBtn color='danger'>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup shadow='0'>
                  <MDBBtn color='warning'>Left</MDBBtn>
                  <MDBBtn color='warning'>Middle</MDBBtn>
                  <MDBBtn color='warning'>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup shadow='0'>
                  <MDBBtn color='info'>Left</MDBBtn>
                  <MDBBtn color='info'>Middle</MDBBtn>
                  <MDBBtn color='info'>Right</MDBBtn>
                </MDBBtnGroup>
    
                <br />
                <br />
    
                <MDBBtnGroup shadow='0'>
                  <MDBBtn color='dark'>Left</MDBBtn>
                  <MDBBtn color='dark'>Middle</MDBBtn>
                  <MDBBtn color='dark'>Right</MDBBtn>
                </MDBBtnGroup>
              </>
            );
          }
        

Button group - API


Import


        import { MDBBtnGroup } from 'mdb-react-ui-kit';
      

Properties

MDBBtnGroup

Name Type Default Description Example
tag String 'div' Defines tag of the MDBBtnGroup element <MDBBtnGroup tag="section" />
className String '' Add custom class to MDBBtnGroup <MDBBtnGroup className="class" />
size String '' Sets the size of the button group <MDBBtnGroup size="lg" />
shadow String '' Sets the shadow of the button group <MDBBtnGroup shadow="1" />
toolbar Boolean '' Makes a toolbar from an MDBBtnGroup <MDBBtnGroup toolbar />
vertical Boolean '' Makes a vertical MDBBtnGroup <MDBBtnGroup vertical />