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?”
• Avoid 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.

Variants

Default Link

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

Simple Link

Simple Link is a more subtle styles which looks more like regular body copy. It is perfect inside menus, footers, and other elements where context implies an ability to interact with the text.

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

Disabled Link represents a link that is 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.