Link

 

Link takes users to another page or website, and usually appears within or directly following a sentence.

Overview

Links allow users to navigate to a different location. They provide a lightweight option for navigation but if they are overused on a page, it can be difficult for users to choose their next step.

Anatomy

Anatomy: Link

Anatomy: Link

  1. Text: Communicates where the link will take the user.
  2. Underline: Provides visual distinction from surrounding text in addition to a link's color.

 

Demo

Storybook failed to load. Please connect to the VPN to access.

Open the component in Figma.

When to use

Use a link for navigation:

  • To a different page within the application or website.
  • To an external domain outside of the current application or website.
  • To trigger an email or phone number.

When not to use

For any non-navigation action, use a button instead:

  • To submit a form.
  • To close a modal.

 

Using links and buttons correctly and consistently will create:

  • products that are easier to maintain at scale.
  • a more cohesive visual experience.
  • a more accessible experience.

Similar components

Variants

Default

The default link style is blue to make it stand out as an interactive element. This should be used in most use cases.

Monochrome

The monochrome variant matches the color of paragraphs. It can be used for a more subtle look. Monochrome links are underlined.

Properties

Leading and trailing icons

Icons can be placed before or after the text of a link to clarify or call attention to it. Only one icon, either leading or trailing, should be used per link.

Use an icon only when necessary and when it has a strong association with the text. The icon should never be used for decoration.

Leading icons

null

 

Trailing icons

External link

The most common trailing icon. If the link is an external URL, use the external link icon after the text to signal it will open in a new window or tab.

External Link Example

 

If the link is to an email address, write out email addresses and phone numbers so users can read or copy them.

Email link example

 

 

Behaviors

Opening a new tab or window

Avoid opening links in new tabs or windows, especially when links must be within a sentence. This behavior can be disorienting to users and increases user’s mental loads to manage the information.

Open links in new tabs or windows when:

  • Navigating to a page outside of Okta.
  • Referring to content that isn’t available in the current page, but is required to to complete a task on the page.
  • Triggering an email or phone number.

States

As an interactive element, the link component has the following states:

Default

The default state lets users know that a link is interactive. Odyssey Default Links are no longer underlined.

Hover

The hover state is initiated when a user pauses over the link with a cursor. Hover states are underlined.

Focus

The focus state displays the hover state with an additional highlight ring to visualize the interaction more easily when navigating with a keyboard.

Disabled

The disabled state prevents a user from initiating an action. The context of the page or component should make it clear why the link is disabled and what needs to change in order to be able to use it.

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for link.

Our color palette is calibrated so that links pass the multiple simultaneous WCAG thresholds required to be accessible without the underline. That includes contrast between the link and the background, and the link and surrounding text. This reduces the visual noise of the underline, particularly in link-heavy UIs.

Content guidelines

Text

  • Clearly describe the link’s purpose — either its function or where it takes the user.
  • Is descriptive enough that the link makes sense without any other context.
  • If the link leads to a page with content, use a descriptive noun. For example, survey feedback.
  • If the link leads to a page with a task, start with a verb. For example, share your feedback.
  • Use the same text for links that navigate to the same content.
  • Use different text for links that navigate to different content.
  • Use one to three words.
  • Don’t use click here or here as link text because they doesn’t communicate any context.
  • Avoid learn more alone. It’s best for clarity and accessibility to give more context. For example, Learn more about access certification.
  • Do everything you can to write the sentence so that the link is at the end of the sentence.
  • If the link is at the end of a complete sentence, use proper end punctuation but don’t link the punctuation.
  • Link one to three words — not the entire sentence.
    • This helps globalization because word order can change in translation and break up the intended link if it’s not a proper noun.
  • Treat standalone like calls to action and use the verb + noun pattern.
  • Don’t use end punctuation unless the link is a question and requires a question mark.
  • Link one to three words.

 

Content accessibility

  • Use a concise version of the page title or destination content as the link text to communicate context and set clear expectations about where the link will go.
    - People using screen readers may tab between links without getting the text in between, so very generic link wording like learn more, click here, or view documentation doesn’t communicate any context.

Do

Don't

See all groups.

To see all groups, click here.

 

  • If links have to remain generic, associate the generic link text with other text that can provide context using either aria-describedby or aria-labelledby (to concatenate multiple text strings). For example, associate learn more with the component heading.
  • Writing out email and phone links allows users to read or copy the information without selecting the link, if they choose.
  • Use the same text for links that navigate to the same content.
  • Use different text for links that navigate to different content.