Button group

Group a series of buttons together on a single line or stack them in a vertical column.

Idea React provides the ButtonGroup wrapper for these examples. It renders a role="group" container and applies .btn-group; set vertical to render .btn-group-vertical instead. Wrap groups in ButtonToolbar for a role="toolbar" container that applies .btn-toolbar.

Examples

Wrap a series of Button components in a ButtonGroup.

Button groups require an appropriate role attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use role="group" for button groups or role="toolbar" for button toolbars. Then use aria-label or aria-labelledby to label them.

With links

These classes can also be added to groups of links, as an alternative to the Nav navigation components.

Dividers

Add a divider between buttons by adding the btn-group-divider class to the ButtonGroup. Most useful when used with buttons that have the same theme color and a solid fill.

Works with vertical button groups, too.

Theme variants

Use the theme prop to apply a theme color to a set of buttons.

You can mix and match button variants in a button group.

Style variants

All button styles are supported in button groups. Mix and match with the btn-group-divider class to add dividers between some styles or just use the button borders in others.

Toggle buttons

Checkbox

Checkbox toggle buttons can be grouped together. Any or all of the buttons can be checked. The ToggleButton wrapper renders the label, the visually hidden input, and the button classes.

Radio

By design, radio toggle button groups can only have one button checked at a time.

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.

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.

Sizing

Instead of applying button sizing classes to every button in a group, just add btn-group-lg, btn-group-sm, or btn-group-xs to each ButtonGroup, including each one when nesting multiple groups.

Vertical variation

Set the vertical prop to make a set of buttons appear vertically stacked rather than horizontally. Split button menus are not supported here.

CSS

Button groups rely on Bootstrap's .btn-group and .btn-group-vertical classes, with dividers drawn by .btn-group-divider; ButtonToolbar applies .btn-toolbar. See the upstream button group CSS for the variable reference.