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.

<Button primary>Save Invoice</Button>

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

<Button negative>Delete Invoice</Button>

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.

<Button primary outline>Add Contractor</Button>

A negative equivalent also exists. It is used when a destructive action is less prominent, usually paired with other buttons.

<Button negative outline>Remove Contractor</Button>

Tertiary Actions

For less pronounced, common actions throughout a page.

<Button>Copy Invoice Number</Button>

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.

<Button outline>Copy Invoice Number</Button>

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.