Link

Preview

Use a link to take the user to another page, section, or resource.

When to use

Use a link to navigate the user to another page, section, or resource. Links are appropriate when:

• The destination is a URL (internal page, external site, or anchor).
• The action is navigational — the user is moving to new content, not triggering a process.
• The link sits inline within body text or as a standalone call to action.

When not to use

• Don't use a link to trigger an action (submit, delete, open a modal) — use a button.
• If it changes data or UI on the current page, use a button.
• Avoid using a link when a button is more appropriate just because it looks lighter or smaller.
• Don't use a link with no discernible destination or purpose.

Behaviour

Clicking or activating a link navigates the user to the linked destination. By default, links open in the same tab.

Only open a new tab when it helps the user keep their place (for example documentation, third-party tools, or downloads). If you open a new tab, make it clear in both the UI and for screen readers.

Visited links change appearance to signal that the user has already been to that destination.

Anatomy

• Label — the visible link text. Should describe the destination, not just say "click here" or "read more".
• Icon (optional) — a small icon to the right of the label. Typically used to indicate an external link or a special destination type (e.g., a file download).
• Underline — the default visual affordance that distinguishes a link from surrounding text.

Variants

Size

• Small — use in dense layouts, captions, or secondary navigation.
• Default — the standard size for body text and general use.
• Large — use when the link needs more visual prominence, such as a standalone call to action.

Urgency

• Low — the standard link style. Use for navigation links within content.
• High — a more visually prominent style. Use when the link represents an important action or destination and needs to stand out from surrounding text.

Icon

• Without icon — standard link.
• With icon — includes a trailing icon. Use for external links, file downloads, or to indicate a special navigation context.

States

Placement & layout

Links can appear inline within paragraphs or as standalone elements. In body text, link text should be long enough to describe the destination — avoid single-word links that lack context.

Standalone links (not embedded in text) may use the Large size for better tap targets on mobile. Always ensure a minimum tap area of 44 × 44 px on touch devices.

Don't place two links so close together that they are difficult to distinguish or tap separately.

Accessibility

• Link text must describe the destination. Avoid generic text like "click here" or "more" — these are meaningless without visual context.
• When a link opens a new tab, indicate this in the link text or with a visually hidden label (e.g., "(opens in a new tab)").
• Links must be distinguishable from non-linked text, either by colour contrast or by underline.
• All links must be reachable and activatable via keyboard (Tab to focus, Enter to activate).
• Visited styles help users orient themselves; do not suppress the visited state.

Related components

• Button — for actions that run on the current page.
• Select — for choosing from a list of options rather than navigating.
• Notification — for inline messages that include a link as a supporting action.