Description

Links are used as a navigational element which enable users to reach other pages.

Open

Usage & Behavior

General guidelines

Content

Links are composed of text only. If the link is part of a sentence or section that has specific styling, it should be presented with the same styling (e.g. font size).

States

State	Image

State	Image
Regular
Hover
Active
Disabled	Open
Focused, Regular
Focused, Hover
Focused, Active
Focused, Disabled

Interaction

• On hover, the mouse cursor changes to a hand:

• Clicking anywhere on the link’s text will either:navigate to a specified location.

• The new location will be opened within the same browser tab, unless otherwise specified.

• In some cases, clicking a link can open a popup or popover.

Best practices

Use:

• to navigate to a new screen, tab, or an element on the same page.

• to link to emails or phone numbers.

Don’t use:

• to change or manipulate data (e.g. View more, Show all) → use Buttons.

General

• Use a meaningful, descriptive label for the link, and match the destination name. Don’t use Click here, Here, or a URL.

• Avoid text wrapping. Use caution with links that are several words long.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Code