
components
Link
v.1.0.0 | SaturnA 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

Name | Description |
---|---|
1 Required | Typically blue in color and used for general information. |
2 | 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

Secondary

Secondary alternative

Options
- Right icon

- 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.

Do's and Dont's

Inline link should be part of a sentence.

Inline link cannot be a whole sentence.

Inline link should be part of a sentence.

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

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.

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.

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

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