A link is a navigational element that takes a user to another URL, an element within a page, or a file.
TODO:Add Figma link once available in the Pajamas UI Kit. Create an issue
TODO: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.
TODO: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 .
TODO:Add accessibility guidlines. Create an issue
Last updated at: