Buttons are used to trigger an action for the user. This is the element that users will be interacting with the most and because there are so many uses of buttons, the Button component has a lot of variations we can use. Color, fill, size, and width can all be mixed and matched to get the exact button needed.
Strict order of buttons is not necessary. Visual hierarchy between Buttons is the important goal.
As a rule, only a single primary action should be present at a time to draw the user through a flow.
When multiple actions surface information or start a workflow, the secondary variant can be used. It also pairs well with a primary action.
A negative equivalent also exists. It is used when a destructive action is less prominent, usually paired with other buttons.
For less pronounced, common actions throughout a page.
An alternative tertiary style also exists. It's used when solid gray is unable to visually work, such as on non-white backgrounds, or pairing with a secondary action.
On data-heavy UIs, the subtle style can be used in large quantities without adding heavy visuals.
When the button is Text, the blue variant is preferred over gray to preserve the Button's signifier to the user.
For Icons, the gray variant is preferred if the icon is understandable to end users.
See the Button Group component guidelines on applying button hierarchy to multiple buttons.
Left-aligned buttons are recommended for single page forms and focused tasks. The buttons are ordered from left to right by importance.
Buttons in page headers and footers prompt a user to move through a sequence of screens are right aligned to visually support navigation. The buttons are ordered from right to left by importance.
Within Overlays, like Modals, actions are right-aligned as well to encourage forward progress through a workflow.
Centered buttons are used when the content is shown in a small, isolated view. These should be used sparingly and are most commonly within overlay-based components such as Modals.