Component

Button group

Other names: Toolbar

A wrapper for multiple, related buttons.

Updated: March 25th, 2019

1 min read

11 examples

Description

A button group is a wrapper for related buttons; useful if you want to display multiple, related actions together.

Markup

Add the correct role attribute to the button group: e.g. role="group" or role="toolbar", to communicate that the buttons are grouped to users of assistive technologies.

Usage guidelines

  • Use consistent rules for the order of buttons across different button groups. One possible rule is to keep primary actions (e.g. submitting a form) on the right and secondary actions (e.g. cancel, go back) on the left.