Link

Links are key elements for navigation. They should only be used for this purpose, and not to trigger specific actions. For the latter case, use a button instead. Different colors from our design system can be used to highlight different categories of links.
To improve accessibility, we recommend to always use underscoring so that links can easily be spotted by users.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

If you want fancy links, add the class .nj-link
If you want to add an icon after add the class .nj-link-icon
If you want to add an icon before, you will need the modifier class .nj-link-icon--before

Here is a default text link

Here is a text link with icon

Here is a text link with a before icon

<p>
  <a href="#" class="nj-link">Here is a default text link</a>
</p> 

<p>
  <a href="#" class="nj-link nj-link-icon">
    Here is a text link with icon
    <span aria-hidden="true" class="material-icons">phone</span>
  </a>
</p>

<p>
  <a href="#" class="nj-link nj-link-icon nj-link-icon--before">
    <span aria-hidden="true" class="material-icons">add</span>
    Here is a text link with a before icon
  </a>
</p>

Contextual

Here is a contextual text link with icon

<a href="#" class="nj-link nj-link--contextual nj-link-icon">
  <span>Here is a contextual text link with icon</span>
  <span aria-hidden="true" class="material-icons">chevron_right</span>
</a>

Grayed

Here is a grayed text link with icon

<a href="#" class="nj-link nj-link--grayed nj-link-icon">
  <span>Here is a grayed text link with icon</span>
  <span aria-hidden="true" class="material-icons">chevron_right</span>
</a>

Inverse

Here is an inverse text link with icon

<div style="background-color: var(--nj-core-color-ultramarine-800); padding: var(--nj-semantic-size-spacing-16);">

<a href="#" class="nj-link nj-link--inverse nj-link-icon">
  Here is an inverse text link with icon
  <span aria-hidden="true" class="material-icons">phone</span>
</a>

</div>

High contrast

Here is a high contrast text link with icon

<a href="#" class="nj-link nj-link--high-contrast nj-link-icon">
  Here is a high contrast text link with icon
  <span aria-hidden="true" class="material-icons">phone</span>
</a>

External link

For link with target=_blank, please use the open_in_new material icon.

External link

<a href="#" class="nj-link nj-link-icon">
  External link
  <span aria-hidden="true" class="material-icons">open_in_new</span>
</a>

Font weight and font size variations

Link inherits its parent weight and size, but you can also force it to be:

bold with the .nj-link--bold modifier
small with the .nj-link--sm modifier

Bold text link

Small text link

<p>
  <a href="#" class="nj-link nj-link--bold nj-link-icon">
    Bold text link
    <span aria-hidden="true" class="material-icons">phone</span>
  </a>
</p>

<p>
  <a href="#" class="nj-link nj-link--sm nj-link-icon">
    Small text link
    <span aria-hidden="true" class="material-icons">phone</span>
  </a>
</p>

Accessibility resources (WCAG 2.1) :

Layout

List