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.

Pairing Guidelines

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

Alignment

Left Aligned

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

Right Aligned

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

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.