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.

Active link Link 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'>
            @
          </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'>
            @
          </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,
} 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</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
            <MDBDropdownItem link>Dropdown link</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,
} 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</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBBtnGroup>
      <MDBBtn>Button</MDBBtn>
      <MDBBtn>Button</MDBBtn>
      <MDBBtnGroup>
        <MDBDropdown>
          <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBBtnGroup>
      <MDBBtnGroup>
        <MDBDropdown>
          <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBBtnGroup>
      <MDBBtnGroup>
        <MDBDropdown>
          <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
            <MDBDropdownItem link>Dropdown link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBBtnGroup>
    </MDBBtnGroup>
  );
}

Colors

















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

export default function App() {
  return (
    <>
      <MDBBtnGroup>
        <MDBBtn>Left</MDBBtn>
        <MDBBtn>Middle</MDBBtn>
        <MDBBtn>Right</MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup shadow='0'>
        <MDBBtn color='secondary'>
          Left
        </MDBBtn>
        <MDBBtn color='secondary'>
          Middle
        </MDBBtn>
        <MDBBtn color='secondary'>
          Right
        </MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup>
        <MDBBtn color='success'>
          Left
        </MDBBtn>
        <MDBBtn color='success'>
          Middle
        </MDBBtn>
        <MDBBtn color='success'>
          Right
        </MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup>
        <MDBBtn color='danger'>
          Left
        </MDBBtn>
        <MDBBtn color='danger'>
          Middle
        </MDBBtn>
        <MDBBtn color='danger'>
          Right
        </MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup>
        <MDBBtn color='warning'>
          Left
        </MDBBtn>
        <MDBBtn color='warning'>
          Middle
        </MDBBtn>
        <MDBBtn color='warning'>
          Right
        </MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup>
        <MDBBtn color='info'>
          Left
        </MDBBtn>
        <MDBBtn color='info'>
          Middle
        </MDBBtn>
        <MDBBtn color='info'>
          Right
        </MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup>
        <MDBBtn color='light'>
          Left
        </MDBBtn>
        <MDBBtn color='light'>
          Middle
        </MDBBtn>
        <MDBBtn color='light'>
          Right
        </MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup>
        <MDBBtn color='dark'>
          Left
        </MDBBtn>
        <MDBBtn color='dark'>
          Middle
        </MDBBtn>
        <MDBBtn color='dark'>
          Right
        </MDBBtn>
      </MDBBtnGroup>

      <br />
      <br />

      <MDBBtnGroup shadow='0'>
        <MDBBtn color='link'>
          Left
        </MDBBtn>
        <MDBBtn color='link'>
          Middle
        </MDBBtn>
        <MDBBtn color='link'>
          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" />
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 />

CSS variables

As part of MDB’s evolving CSS variables approach, Button group now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Most of variables for .btn-group are the same as for buttons.

// .btn-group,
// .btn-group-vertical
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
--#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};
--#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-group-transition: #{$btn-group-transition};

// .btn-group,
// .btn-group-lg > .btn,
// .btn-group-sm > .btn
--#{$prefix}btn-border-radius: #{$btn-border-radius};

SCSS variables

$btn-group-border-radius: calc(4px - 1px);
$btn-group-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;