Groups of Buttons should be left-aligned for most layouts, with the Primary Button on the left. As most content on Vista is left-aligned, this placement of Buttons follows the common UX convention of the “F-shaped” reading pattern, with the most important information presented first.
Primary Buttons always come first in the DOM to maintain correct focus order and screen reader support. Re-order Buttons with CSS.
Use the Button Placement pattern...
- When adding groups of Buttons to a layout.
- To determine the alignment of the Button group and the positioning of the Primary Button.
- For consistent and predictable UI, allowing users to apply knowledge across multiple scenarios.
Scenarios
The preview has been updated.
XS breakpoint
Guidelines for groups of Buttons on the XS breakpoint are more flexible and can use different alignments depending on the context. Buttons can:
- Stack (preferred), with the primary Button on top. All Buttons in the group should be full-width.
- Inline, following the same visual Button order rules as above.
- Inline groups of Buttons can optionally stretch to fill their available space horizontally, but they will remain inline (not stacked).
