Link

const PreviewEn = () => {
  const rand = useId();
  return (
    <Link href={'/en/patterns/external-links/' + rand}>Labelling links</Link>
  );
};

render(<PreviewEn />)

Use Link when

• navigating to a new page, internally or externally
• linking to another location on the same page
• a file should be downloaded

Avoid Link when

• the user is meant to perform an action, such as “Save” or “Log in”; use a Button instead
• the action changes the state of the solution, such as opening a dialog, starting a process or saving data, use a Button instead

Example

With icon

Links can have an icon placed either to the left or the right of the text. As a general rule, we recommend placing the icon on the left.

const WithIconEn = () => {
  return (
    <Link href='https://designsystemet.no/slack'>
      <Chat2Icon aria-hidden fontSize={24} />
      <span>Talk to us on Slack</span>
    </Link>
  );
};

render(<WithIconEn />)

Links in text

A link is often used as part of a text.

const InTextEn = () => {
  const rand = useId();

  return (
    <Paragraph>
      We use components from{' '}
      <Link href={'https://designsystemet.no?q=' + rand}>
        designsystemet.no
      </Link>
      .
    </Paragraph>
  );
};

render(<InTextEn />)

Neutral colour

Links can also be displayed in a neutral colour. This can be useful when the link is placed in an area with its own background colour.

const NeutralEn = () => {
  const rand = useId();
  return (
    <Link href={'/en/fundamentals/privacy-policy' + rand} data-color='neutral'>
      Privacy Policy
    </Link>
  );
};

render(<NeutralEn />)

Guidelines

The link must point to information the user needs, or to a place where they can complete their task. Avoid linking to general pages where the user must search for the relevant information themselves.

It is important not to overuse links, as this can make it harder for users to find their way forward.

Do not use an external link icon

The icon can easily be misunderstood and lead to a poor user experience. Many interpret it as “opens in a new tab”, while others think it means “external site”. Instead, we always recommend using text to explain where the link leads. This makes the function clear both for users and for screen readers. Read more about this in the article Labelling links, which Digdir has developed together with the Norwegian Labour and Welfare Administration, the Norwegian Tax Administration, the City of Oslo and the Brønnøysund Register Centre.

Avoid opening links in a new tab

Both internal and external links should open in the same tab or window. This ensures a predictable user experience.

There are, however, some exceptions where a link should open in a new tab:

• If the system needs to log the user out when navigating to another page, and it is beneficial to avoid logging them out.
• When the user is in the middle of a process and risks losing content by clicking the link. A new tab should be considered if the system cannot save the user's input.
• When linking to content users need while completing a task, for example guidance.

In these cases, we recommend adding “opens in a new tab” as part of the link text so that it is clear to the user.

Read more about this in the article Labelling links.

Text

Good links are self-explanatory and make it clear where the user will end up when selecting them. When writing link text, imagine it being read aloud by a screen reader. The text must make sense on its own, whether it appears in a sentence, menu or list.

Principles for link text

• Use the important words (trigger words) early in the link text.
• “Go to”, “Click here”, “Link to” or “Read more” should never be the entire link text.
• All links on the same page must have unique link text.
• A verb should appear early in the link text.

Find more guidance in the article Labelling links.