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


Loading story...
Add Figma link once available in the Pajamas UI Kit. Create an issue


Add structure visual and list. Create an issue


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.


  • 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.


Add appearance guidlines. Create an issue


  • 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 .


Add accessibility guidlines. Create an issue

Last updated at: