Skip to main content

Link

A link is an interactive element in a user interface that allows users to navigate to another resource or location, typically on the web.

Overview

The purpose of links is to provide a visual and interactive way for users to explore and navigate through an interface. By clicking or tapping on a link, users can quickly access additional information or move to a different location, enhancing their browsing experience and enabling efficient interaction.

Links are often used to connect various pages, sections, or external resources, creating navigation menus and directing users to related content. They also enable interactions like opening new tabs or windows.

A group of links that are displayed together in a row.

Dos and Don’ts

Do
  • Use standalone links to allow users to navigate to different pages within your product.
  • Use standalone links to allow users to navigate to an entirely different website.
  • Use standalone links as means to jump between sections of a page.
Don't
  • Don't use the reversed styling when surrounded by regular text, as it will get lost.

Anatomy

Anatomy of a link.
  1. Label: Text label informing the user about the nature of the link.
  2. Icon (Optional): Leading or trailing icon.

Variations

Default

Should be used as the default colour for all our links.

A default link

High visibility

Uses a blue colour to increase the visibility of the link.

A high visibility link

Inverse

It should be used in areas where an inversed background is used, or when contrast between the default or high visibility links isn’t sufficient to pass accessibility rules.

An inverse link

Modifiers

Emphasis

Links can be de-emphasised by using their non-bold variant. When doing that, make sure these can still be identified as links. You can achieve that by:

  • Adding a leading or trailing icon.
  • Using the high visibility variant of the link.
  • Using the default underline variant of the link.

Bold

A bold link.

Non-bold

A non bold link

Styling

The underline in standalone links can be removed to achieve a more minimal look. This variant can be used when the link is repeated in a list or navigation. However, whenever you do that you’ll need to make sure they can still be identified as a link by ensuring it has enough emphasis.

Default

A default styling link.

Reversed

A reversed styling link

Icon

You can use icons to reinforce the action that will take place when the user interacts with a standalone link. On the high visibility variant of the link the icon needs to use the same colour as the link.

Leading

A link with a leading icon.

Trailing

A link with a trailing icon

Sizes

Medium (M)

Type size 16dp/sp/px

A medium link.

Small (S)

Type size 14dp/sp/px

A small link.

Behaviours

This is available when a link needs to be used as a call to action that triggers an action for the users.

Use these with caution - dictation software users may not be able to properly identify these actions, since they are semantically buttons, even though they may look like links.


Content

  • Be mindful of which words in a paragraph you use for your links. Make sure the words you convert into links are directly related to the content that the link will lead you to.

  • Use sentence-style capitalisation (only the first word in a phrase and any proper nouns capitalised).


Dos and Don’ts

Do
  • Use inline links to allow users to navigate to different pages within your product.
  • Use inline links to allow users to navigate to an entirely different website.
  • Use inline links as means to jump between sections of a page.
  • Use inline links to present phone numbers or email addresses.
Don't
  • Don’t use inline links as calls to action. Use buttons instead.
  • Don’t use inline links for actions that will change elements in a screen. Use buttons instead.
  • Don’t use an icon with inline links. Use standalone links instead.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

A default link.

Hover

A hovered link.

Active

A active link.

Focus

A focused link.

Visited

A visited link.

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of links in left-to-right context:

A left to right example of a default link
A left to right example of an inverse link on a dark background
A left to right example of an inlined link
A left to right example of an inlined link on a dark background

RTL examples

Here are some examples of links in right-to-left context:

A right to left example of a default link
A right to left example of an inverse link on a dark background
A right to left example of an inlined link
A right to left example of an inlined link on a dark background

Resources

Stable
Stable
Beta
Stable
Stable
iOS JustUI [UI Kit]
Stable
iOS PIE [SwiftUI]
Stable
Android PIE [Compose & Views]
TBC