Pencil Box / ComponentsGraphic Standards Manual

Button

Square, flat and plain-spoken. Primary is Manila on black (black on Manila in light). One Primary button per view; Secondary and Outline for everything else; Emphasis, in Beaurocracy Blue, almost never.

Edit this page

Dark

Light

<button class="doi-button">File a request</button>
<button class="doi-button doi-button--secondary">Read more</button>
<button class="doi-button doi-button--outline">Cancel</button>
<button class="doi-button doi-button--emphasis">Report</button>
<a class="doi-button doi-button--lg" href="/archive">Open the archive</a>

Variants and states

	Default	Hover	Pressed	Focus
Primary	Button	Button	Button	Button
Secondary	Button	Button	Button	Button
Outline	Button	Button	Button	Button
Emphasis	Button	Button	Button	Button

Sizes

There is no small button. 44px is the minimum touch target.

Guidelines

Use one Primary button for the main action in a view. Write labels as short verbs: File, Submit, Save.

Don't

Line up several Primary buttons, or use a button for navigation that should be a link.

Use Emphasis for one action a reader must not miss, like reporting an anomaly. Never more than one per page, and never next to a Primary button.