Link

A Link takes the user to another page or to a specific location on a page.

Usage

Use a Link when you want the user to navigate to another page, a specific location on a page, or to download a document.

Guidelines

• Link text should clearly describe where the Link will take the user. It must answer, “what will the user get when they interact with this?”
• Do not use ambiguous Link text like “Click Here”.
• Don’t use a Link if you aren’t navigating somewhere or downloading a document unless the proper accessibility considerations are met.
• Links should primarily be part of a sentence or near other text content.
• If used as a standalone call to action, use first-person pronouns. For example: Use "Download My Approval Letter," instead of "Download Your Approval Letter."

Variants

Default Link

Default Link is the standard Link style and should be used for most hyperlinks.

Simple Link

A more subtle Link style which looks more like regular body copy. Use Simple Links in navigation, or in the header and footer of a page, where context implies an ability to interact with the text.

Light Link

A link style for dark backgrounds. Light links are mainly used in Footer.

Icon with Text Link

This style combines an Icon with text. This is most useful in menus or standalone text and shouldn’t be used in a sentence.

Disabled

Represents a Link that’s not currently available for interaction. Using this variation helps screen readers and other assistive technologies understand that the Link can’t be interacted with.

Anatomy

• A Link must contain text.
• A Link may contain an icon.

Accessibility

• Avoid using Link to perform actions other than navigation or accessing external resources, like a file download. If you do, you must provide the appropriate accessibility controls.