Link

A link is an interactive text element that navigates the user to a new location. This destination can be another page, a specific section within the current page, an external website, or a resource to be downloaded.

When to use

Standalone

Use for navigation that stands on its own, such as in menus, footers, or as a call-to-action to view more information.

Standalone

Use for navigation that stands on its own, such as in menus, footers, or as a call-to-action to view more information.

Inline

Use within a sentence or paragraph to link to relevant context, sources, or definitions without disrupting the flow of the text.

Inline

Use within a sentence or paragraph to link to relevant context, sources, or definitions without disrupting the flow of the text.

When to avoid

For primary actions

Do not use a link for actions that change data or the state of the current interface (e.g., "Save," "Submit," "Delete," "Close"). Use a button for such actions. Links should strictly be used for navigation.

For primary actions

With vague text

Avoid generic link text like "Click Here" or "Learn More." Link text should be descriptive and clearly communicate the destination to improve accessibility and user experience.

With vague text

Avoid generic link text like "Click Here" or "Learn More." Link text should be descriptive and clearly communicate the destination to improve accessibility and user experience.

Specifications

Variations

Standalone

A link that appears as a block-level or standalone element. It is typically used for navigation or calls-to-action.

Inline

A link that is part of a larger block of text, like a sentence. Its styling is designed to be clear but not disruptive to the reading flow.

Standalone

A link that appears as a block-level or standalone element. It is typically used for navigation or calls-to-action.

Inline

A link that is part of a larger block of text, like a sentence. Its styling is designed to be clear but not disruptive to the reading flow.

Standalone

A link that appears as a block-level or standalone element. It is typically used for navigation or calls-to-action.

Inline

A link that is part of a larger block of text, like a sentence. Its styling is designed to be clear but not disruptive to the reading flow.

Standalone

A link that appears as a block-level or standalone element. It is typically used for navigation or calls-to-action.

Inline

A link that is part of a larger block of text, like a sentence. Its styling is designed to be clear but not disruptive to the reading flow.

Behavior

Navigation

Clicking a link navigates the user to the destination specified in its "href" attribute.

External link

Links that navigate to an external website or domain should be accompanied by an "external link" icon to inform the user they are leaving the current site. This helps manage user expectations.

Anatomy