Atlas

Appearance

Link ​

A Link navigates the user to another page, view or section, when the user presses it.

Working in progress

This component is still under development. It is not yet available in releases of Atlas.

Overview ​

Use the Link component when you need to provide users with a clickable element to navigate to a different page, resource, or section in the same page.

Apart from links that navigate to other pages, there are the following different links:

  • Links that open a modal instead of a new page (e.g. map links)
  • Links that open a file instead of a web page (e.g. PDF or document links)
  • Links that cause something to happen that the user would otherwise not expect (e.g. play a sound, like pronunciation links)
  • Links that open a new website instead of solely a new page (external links)
  • Links that open a non-web protocol URI (e.g. mailto:, tel: links)

Avoid using Link when the user needs to perform an action. In such cases, use Button instead. Learn more about the usage of links and buttons.

Link includes the following element.

Link text ​

The text that describes the link destination as clearly as possible.

By default, the Link text style is set to the base font in regular. However, it can be easily customized to other styles by applying any of the existing fonts, text sizes or formats defined in our font design tokens.

  • Do: Highlight only the phrase that indicates the link destination. Translatable
  • Don't: Avoid using the words click, tap or here. Avoiding these terms makes things clear and precise, whether the reader is using an assistive device, a mobile device or a desktop experience. Accessible

Examples ​

Visit a link to check visited link styles.

Base Links signal to users the option to navigate to a different page, view, or resource.

By default, Links are only underlined when they are interacted with (hover over or pressed). To suit user preferences and for accessibility reasons, Links can always be underlined.

The external link icon indicates that the link will take the user to a different website. This icon cannot be replaced with other icons.

Technical implementation ​

Keyboard navigation ​

KeyFunction
EntrerIf the Link is focused, it opens the Link.