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'>
@
</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
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;