Nim, the Okta Design System

Links

Links are navigation elements displayed as text. A link can open another page or jump to a section of a page.

Default

Here is a regular link.

Here is a hovered link.

Here is a visited link.

<a href="#">Link</a>

The :active state of a link does not have any unique styling, so it matches the :hover styling.

Anchor

An anchor link takes you to a location on the current page. It is typically used in documentation.

Mailto

If a direct email link is required, display the whole address (e.g. lauren.ipsum@okta.com). Avoid colloquial text that might obfuscate the presence of a mailto link (e.g., "Contact Us").

<a href="mailto:lauren.ipsum@okta.com">lauren.ipsum@okta.com</a>

An external link opens in a separate tab and can be 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. additional information such as help documentation)
  • Opening the link in the current tab would result in a significant loss of data or interruption of flow (e.g. while filling out a long form)

(See Google Developer Documentation for security and performance considerations when using external links)

<a href="https://okta.com" target="_blank" rel="noopener">Okta.com</a>

Guidelines

Best practices

  • Try to limit a link to at most 3 words
  • Choose link text that describes the destination (e.g. "Settings"), rather than generic text (e.g. "Click here" or a URL)
  • Avoid using a link <a> for actions; use a button <button> instead
  • Avoid underlining text for purely decorative purposes, as it will be mistaken for linked text

Styling

By default, links embedded inside blocks of prose text are underlined, while links used inside navigational menus and nav bars do not require an underline and may be custom-styled.

Link styling can also be adjusted for branding, theme, or contextual purposes. Examples include color, font size, or font weight. Be mindful of consistency with the system you are designing for.

Accessibility

Links should display a visible :focus state when users interact via keyboard.

Localization

When localizing links, avoid putting the text through a translator and applying the markup. Instead, consider the language's nuances and grammar to make the link and its surrounding messaging feel natural.

Further reading