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
- Text: Communicates where the link will take the user.
- Underline: Provides visual distinction from surrounding text in addition to a link's color.
Demo
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
External link
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.em
Email link
If the link is to an email address, write out email addresses and phone numbers so users can read or copy them.
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.
Inline link placement
- 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.
Standalone links
- 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.