Button group

Use a button group to arrange each button as a separate element with a gap between them. On small screens, buttons are arranged vertically.

To reduce cognitive load and avoid visual clutter, use three buttons maximum.

For help with writing button content and character count guidance, go to the Writing content section on the Buttons page.

Button groups can be placed in dialogs, forms, wizards, and more. Button groups in these elements should always be aligned left.

It is important to establish visual hierarchy between buttons in your designs. Buttons in groups are most often ordered from left to right with the primary action on the left.

When it comes to wizards and other similar elements, the primary action is the Next button in the middle of the group.

Use three buttons max per group.

Do not use more than three buttons in a group.

Use one primary variant only mixed with other variants.

Do not use more than one primary variant in a button group.