Buttons

Buttons communicate actions that users can take. The action is made clear and visible and can be performed with one click, tap, or keypress. Buttons contain a clear label and sometimes an icon.

When to use buttons

Use buttons to let users:

Take an action, such as downloading, saving, publishing, uploading, or opening a dialog box
Progress to another step (for example: in a multi-page survey)
Submit a form

Buttons generally should not be used for standard navigation to another page in the same website. Instead, use links if the action will take a user to a new page.

Our button types

In most cases, use the Primary button type. This includes actions, progressing to another step, and submitting a form.

The Secondary type can be used when placing two buttons near each for differentiation.

We also provide 3 additional types for more specialized uses:

Ghost — form elements and dropdowns
Critical — irreversible actions like deleting data
Search — search input only

Guidelines for using buttons

Buttons must include hover and focus states that are unique from the resting state. On focus, buttons must identify its name, role and state.

Button labels should:

Be clear and indicate what will happen when a user selects the button.
- For sets of buttons, use specific labels like Save and Discard instead of OK or Cancel.
Use active verbs, such as Add, Delete, or Save.
Use sentence case (Set preferences, note Set Preferences).
Be 3 words or less if possible and avoid wrapping. For best legibility, a label should remain on a single line.

Icons may be added to convey meaning and draw more attention, but must come before the text label. Never use more than one icon per button. Avoid icon-only buttons unless they are for quick actions that are widely recognizable when you have limited space.

Relevant WCAG guidelines

Code example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.