components / Actions and Inputs



Strict order of buttons is not necessary. Visual hierarchy between Buttons is the important goal.

Primary Actions

As a rule, only a single primary action should be present at a time to draw the user through a flow.

Destructive primary actions use a negative color. Clicking this should trigger a confirmation (usually as a Dialog) before proceeding with the action.

Secondary Actions

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.

Tertiary Actions

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.

Subtle Actions

On data-heavy UIs, the subtle style can be used in large quantities without adding heavy visuals.

Text-based Subtle Actions

When the button is Text, the blue variant is preferred over gray to preserve the Button's signifier to the user.

Icon-based Subtle Actions

For Icons, the gray variant is preferred if the icon is understandable to end users.

Pairing Guidelines

See the Button Group component guidelines on applying button hierarchy to multiple buttons.


Left Aligned

Left-aligned buttons are recommended for single page forms and focused tasks. The buttons are ordered from left to right by importance.