Buttons and links

Use a primary button for the main action and a secondary button for a supporting action.

Use a warning button only for a serious destructive action that is difficult to undo. State the outcome clearly and do not rely on its red color to communicate risk.

Disabled buttons are shown only when an unavailable action must remain visible.

Use a standard blue link for content destinations that people should notice while reading or scanning, such as an article, project, or task.

Read more about choosing the right control.

This is the example link destination.

Use a current-color link for a secondary utility, navigation, or form action when its context already establishes its role and standard blue would compete with primary content. Examples include view-all, back, retry, remove, and pagination links.

Keep current-color links underlined unless an established component pattern identifies them as links. Do not use current color merely to hide or de-emphasize an important destination.

This link inherits its color

This is the current-color link destination.

Use a back link at the start of a form or task when users may need to return to the previous step.

Back

Back to home