When to use this component
- To navigate to another page on the current site or to content on another site.
- To link to email addresses and phone numbers.
- To provide an anchor link to content on the same page.
- To link to a downloadable document.
When not to use this component
Links should not be used for actions that will change data or manipulate how it is displayed, change a state, or trigger an action. Buttons should be used instead.
Accessibility and Usability
- Links should be descriptive, indicating where the user will be sent. Never use click here, read more, or learn more.
- Links should always be underlined.
- Links should have focus indicators both on hover and on keyboard focus. The keyboard focus indicator documented below is designed with dark mode in mind with both an outline and a box-shadow to ensure that there are two focus indicator colors that either work in light or dark mode. This design mirrors what Google has released in their Chrome browser. It also ensures that the focus indicator design works when tabbing through sections of the site with dark backgrounds, such as the header and footer.
- Links should not open in a new window. Users should be allowed the choice of whether to open the link in a new window. If a use case requires the link to open in a new window, the user must be alerted that it will be opened in a new window.
- Document links should be appended with the document file type in parentheses and the file type should be included in the descriptive hyperlink. For Example, Email Policy (PDF).