Link
A link is a navigational element that takes a user to another URL, an element within a page, or a file.
Examples
Link
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 issueRelated
Last updated at: