Link

When to use the link component

Navigating to a new page or view.

Use links to connect users to a different page or further information.

Navigating to an external website.

Use links with the external link indicator to show users they will leave your site.

When to consider something else

Triggering an action.

Use a button instead of a link when the user is performing an action, such as submitting a form or opening a modal.

Usability guidance

Clearly identify external links.

The external link icon is a good way to communicate that a link is external.

Use unique, meaningful link text.

Link text should explain the link's purpose and help the user understand the link's destination. Avoid vague text like "click here" or "read more".

Simplify link placement in body text.

A link requires mental effort, which affects readability. Reduce the number of links in a single sentence to simplify its message.

Link directly to the most relevant page.

Avoid links to pages that require further user action to locate the intended information.

Indicate file type and size for non-HTML content.

If you link to a file, tell users ahead of time if the link may trigger a file download, and show the size and format of that file.

Write out email and phone links.

For mailto: and tel: links, write out email addresses and phone numbers so users can read or copy this information without selecting the link.

Accessibility guidance

Allow keyboard navigation of links.

Users should be able to navigate between links by using the "Tab" key. They should be able to activate a link by pressing the "Enter" key.

Link hover state should be visible on focus.

Users should be able to activate hover and focus states with both a mouse and a keyboard.

Don't rely only on color to distinguish links.

Include an underline or bottom border on text links, in addition to a consistent link color.

USWDS Documentation

For more guidance, view the USWDS Link Component Documentation.