components / Actions and Inputs

Button

Hierarchy

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.