Text link
v2.1
Text links take users to a new location within the product, to external content, or to an anchor point. Selecting a text link always results in a URL change or new browser tab.
Text links take users to a new location within the product, to external content, or to an anchor point. Selecting a text link always results in a URL change or new browser tab.
Both use an underline as visual affordance, but they behave differently and serve different purposes.
It takes them somewhere new — a new page, external site, anchor point, or browser tab → use a text link
It performs an action on the current page — expands content, triggers a change, submits something → use a link button
Link text names the destination or content, not the act of selecting it. Avoid generic phrases like “click here” or “learn more” on their own. For readability, position links at the end of sentences.
Inline links appear within paragraphs and sentences. They always have an underline to differentiate between non-link content.
Links should generally match the color of the content around it. Standalone links can use a secondary color within a list to avoid overwhelming the UI or a primary color for more emphasis.
Exception: Legal links must use the specific legal link color.
Text links inherit their size and styling from the content around them.
Text links use state layers for interaction states. The available states are enabled, hover, focused, visited, and disabled. Learn more about the state layer color values in Color tokens.
Links placed on backgrounds using our expanded color palette should use the coordinating foreground color to match. This ensures we meet WCAG’s 4.5:1 ratio standard for AA contrast. See Accessibility foundations for more info.
Keep in mind that on native devices, it's common for an entire line of text to be tappable when it contains a link. This is particularly important if multiple links are close together, as it could lead to accidental taps.
Use words that describe where the link leads and what content is expected.
Don’t use ambiguous words like “click here” or “learn more”. They lack necessary context for screen reader users.
Always underline links within or right after paragraphs. Only remove the underline where the context is clear, like a list of links in a footer.
Don’t remove the underline for links near other content. This can easily get lost and are inaccessible to low-sight users.
Do use the same type size as the surrounding text.
Don’t mix type sizes.
Use links in body copy or footnotes.
Don’t use links for titles or headlines.
Do open links in the same browser window.
Don’t force links to open in a new window. This is a poor experience because it takes control away from the user and forces web-browsing behavior upon them.
Do use text links for non-legal links, such as Seller policy. Use blue links when required for legal compliance.
Don’t use blue for non-legal links, such as Seller policy.
