Link

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)

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.

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 may be included in standalone links. They are not supported within paragraph content or longer copy.

Icon layout is automatic, based on language direction.

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

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.