Link

Sometimes we don't have space to be more verbose and the Link content can't provide enough context. In those cases, use the accessibilityLabel prop. accessibilityLabel adds an aria-label attribute to the link, which assistive technologies like screen readers can access. Typically, the label text replaces the visible text on the Link for users who use assistive technology. While we don't recommend using "Learn more" or "See details" for Link text, it can be used as long as it is supplemented with a more descriptive accessibilityLabel, like "Learn more about personalization and data" or "See rate limit details for trial package".

Accessible content is critical if we consider that assistive technology also presents links in isolation from their contexts. For example, screen reader rotors list all the links present in a page. If all listed links are repetitions of the same generic phrases, the content is not accessible.

Give Link keyboard focus with the tab key (or shift + tab when tabbing backwards). Activate Link with the enter/return key.

When rendering an external link, add text for screen readers that this Link will go to a different destination. Users should be informed that they will be moving out of a domain and which domain they are moving to. This is particularly relevant for those with cognitive impairments or people relying on assistive technology.

These are cases where external links should open in a new tab, as it supports Pinners to better navigate our product without disrupting their flow experience:

• When changing pages would make the user lose unsaved progress—for example, filling out a form or adding content.

• When starting a process, which would stop if the user clicks away. For example, watching a video or completing a core task.

• When Pinners are logged in and, clicking away would interrupt that session.

Sometimes opening links in a new tab can be challenging for users with difficulty perceiving visual content, users with cognitive disabilities, or people who magnify their screens. We don't recommend opening a link in a new tab when:

• It is invasive and disruptive to the flow of the page.

• Users have not been clearly informed about this behavior.

We recommend adding an external link to inline content. However, use a maximum of two external links per paragraph when possible, as adding more than two icons in the same block of text can clutter the design and create readability issues.

Also, consider adding external links to elements where the "visit" icon will support the user's comprehension, letting them know they are leaving Pinterest content and going to an external domain. For example, when using external links inside a footer element.

For external links where an external Gestalt Link doesn't apply, check out Button link role or IconButton link role.

Link depends on Text to inherit style attributes including weight, color, and size. Aim to match the text size and style of the content they are accompanying. Always use Link within Text to get the correct underline color.

Link uses the typography color tokens. Keep in mind colors should be used purposefully and consistently as they convey meaning in multiple ways. See below how to use colors on links.

1. color="default"
   Default text color for links used across Pinterest UI.
2. color="subtle"
   Intended for links placed within a subtle inline text (e.g. additional link on a sub-header).
3. color="inverse"
   For links over a dark-colored background. Make sure it has a 4.5:1 contrast ratio between foreground and background.
4. color="shopping"
   Used on links related to shopping products or surfaces when a color is needed to highlight a link. Please note: This color should only be used in a shopping context.
5. Status: color="error", color="warning", color="success"
   Used purposefully, applies only on links within a status message. See status colors for reference.
6. Documentation: color="link"
   Reserved color for links within documentation and internal subsites when a color is needed to convey interactivity. Please note: This color shouldn't be used on links across Pinterest customer-facing UI.

To follow Link design guidelines and best practices, inline and underline props must be used accordingly. In addition, using Links consistently will ensure a great usability experience.

We recommend showing the underline on the link, at least upon a hover behavior; it will sustain accessibility standards. Only hide the underline if the link element has a different hover behavior (e.g., a color background), and the user can still perceive the element as a link. In that case, it’s always a good idea to test this assumption with users. Reach out to Gestalt for assistance.

Don’t underline Text that isn’t a Link, as underline has a strong link affordance.

Link with inline={true} defaults the underline style to "always" to follow design guidelines while inline={false} defaults the underline style to "hover". On hover, underline="always" removes the underline, while underline="hover" adds it.

However, Link's underline style can be overridden at any time using the underline prop.

underline="none" doesn't show any underline style. However, for cases where underline isn’t needed to convey interactivity or when the link element doesn’t function as a link visually, consider using TapArea or Button with role=link.

target is optional and defines the frame or window to open the anchor defined on href:

• "null" opens the anchor in the same window.
• "blank" opens the anchor in a new window.
• "self" opens an anchor in the same frame.