Link

A link is a navigational element that takes a user to another URL, an element within a page, or a file.

Examples

Link
Open in Storybook
Loading story...
TODO:
Add Figma link once available in the Pajamas UI Kit. Create an issue

Structure

TODO:
Add structure visual and list. Create an issue

Guidelines

When to use

  • A link (anchor <a>) element is used as navigation to:
    • A new URL.
    • An element within a page.
    • A file.

When not to use

  • If you are performing an action, like saving, consider using a button element instead.

Behavior

  • A link opens the destination in the same window by default.
  • Native controls to open a link in a new tab or window aren't suppressed.
  • A link can use target="_blank" if it's intentional that the user cannot use the browser's back function to return to the reference, and that it's clear to the user they are leaving the current experience.

Appearance

TODO:
Add appearance guidlines. Create an issue

Content

  • A user should be able to predict where they will go upon click.
  • Avoid vague text such as "click here," URLs as link text, or creating a link from more than just a short sentence. Link texts should be clear and meaningful. For example, Before reviewing a MR, review the best practices.
  • If a link is at the end of a sentence, the period should not be part of the link.
  • An external link should use the external link icon. The icon should use aria-label="(external link)", or similar, to communicate the purpose to screen reader users. For example, Learn more about Kubernetes .

Accessibility

TODO:
Add accessibility guidlines. Create an issue

Last updated at: