Go Main page
Go Main page

Web components

cover

components

Link

v.1.0.0 | Saturn

A clickable element that enables the users to navigate between reference (url). Use a link when you want users to:

  • Navigate to a different page within the application
  • Navigate to an entirely different site
  • Jump to an element on the same page
  • Link to emails or phone numbers

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Label
Required
Typically blue in color and used for general information.

2

Right icon
It helps to quickly understand the meaning of the action.

Variants

  • Default: A default state communicates an interactive component or element.
  • Hover: A hover state communicates when a user has placed a cursor above an interactive element. *Hover state only will be applied in desktop.
  • Pressed: A pressed state communicates a user clicks or taps.
  • Keyboard focus: A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
  • Disabled: A disabled state communicates a noninteractive component or element.
  • Loading: A loading state indicates that a quick progress taking place (e.g., saving settings on a server). In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress.

Primary

Foo

Secondary

Foo

Secondary alternative

Foo

Options

  • Right icon

Foo

  • Inline link style

The inline links will have the same sizes as the text style where they are placed. Inline link color can vary depends on the design needs.

Foo

Do's and Dont's

Foo

Do’s

Inline link should be part of a sentence.

Foo

Don’t

Inline link cannot be a whole sentence.

Foo

Caution

Inline link should be part of a sentence.

Foo

Do’s

Be mindful of link placement and language, and create experiences that are inclusive of users navigating with screen readers.

Foo

Don’t

People using screen readers may tab between links without getting the text in between, so very generic link wording like “Check more” or “Click here” doesn’t communicate any context from elsewhere in the experience. Identify the target of each link directly in the link text to communicate context and set clear expectations about where the link will go.

Foo

Caution

It’s OK to incorporate multiple links into the same sentence as long as the links are contextual and relevant. Do not overload sentences and pages with links.

Foo

Do’s

Inline links should be sentence case when embedded in a sentence. Navigation links will be capitalized the first letter of the word.

Foo

Don’t

Inline links should be sentence case when embedded in a sentence. Navigation links must not be written in lowercase.