Skip to main content
Odyssey Design System

Link

Links are navigation elements displayed as text. Use a Link to bring a user to another page or start a download.

# Anatomy

# Variants

External links open in a separate tab and are identified by the icon appended to the link.

Use an external link when:

  • The destination of the link aids in the completion of a task on the current tab (e.g. help documentation)
  • Opening the link in the current tab would result in loss of data or task interruption (e.g. completing a long form)

# States

Odyssey disables special styling for visited links. This is an intentional compromise that preferences user security and ease of maintenance.

# Usage

Links may be used within content or as standalone UI. When using links within content - like a paragraph or list item - do not pair them with Icons.

Avoid using Links for actions, preferring Buttons instead.

# Content guidelines

Choose Link copy that describes the destination (e.g. "Settings"), rather than generic text (e.g. "Click here" or a URL). Aim to keep this copy concise, three words at most.

Keep in mind that all users may not have the same visual context due to their device or other constraints.

# Icons

Icons may be included in standalone links. They are not supported within paragraph content or longer copy.

Icon layout is automatic, based on language direction.

# Mailto

If you need a direct email link, display the whole address (e.g. lauren.ipsum@okta.com).

Avoid colloquial text that hides the associated email (e.g. "Contact Us").

# Accessibility

Links in Odyssey are not underlined. They maintain a minimum 3:1 contrast ratio with our body text colors and a 4.5:1 ratio with our available background colors. If you deviate from these standards via overrides, ensure that your links have a non-color indicator like an underline.

Links should display a visible affordance when users interact via keyboard. Odyssey preserves the default :focus state for each browser.

# References

# Further reading