Links

When to use

• Use a link to navigate to a different page or site, whether an internal route or an external URL.
• Use a link to jump to a section within the same page, for example anchor links, skip links, or a table of contents.
• Use a link for a file, email address, or phone number, using mailto: or tel:.
• Use a link for inline references inside body text, such as “read our privacy policy” or a reference to related content mid-sentence.
• Use a link for lightweight, low-emphasis navigation in lists, cards, or table rows, where the destination shouldn’t compete visually with primary actions.
• Use a link when the destination is a real, shareable URL, something a user can open in a new tab, copy, or bookmark.

When not to use

• Don’t use a link to trigger an action that changes data or state, such as submit, save, delete, or toggle, with no URL change. Use a button instead. It correctly signals “this does something” rather than “this goes somewhere,” matching what assistive technology expects.
• Don’t use a link for a primary or high-emphasis call to action, such as “Buy now” or “Create project”. Use a filled button so it carries the right visual weight.
• Don’t use a link on an image with no accompanying text or context. Use a tile instead, which can hold an image plus supporting text and its own link.
• Don’t use a link when you need a disabled state. Native anchors don’t have a reliable disabled state. Use a button with a disabled state instead.
• Don’t use a link for navigation that should look like a button, for example “Go to dashboard” styled as a filled button. Apply the button class to an anchor with a valid href instead: it stays semantically a link while looking consistent with other buttons.

Choosing a variant

Variant	Typical use
Link inline	Within a sentence or paragraph of body text. Not a separate component in Figma; apply the text style instead.
Link underlined	A standalone link where a button would be too prominent, heavy, or take up too much space, e.g. “Read more”.
Link plain	Navigation and other contexts where interactivity is already obvious. Similar to a text button, but wraps and has no icon.
Link with tap area	Navigation links that need a larger, more forgiving touch target.

Caution

Only use Link plain where the surrounding context already signals interactivity, such as a navigation menu, or next to a more prominent link or button that leads to the same action. It carries almost no visual indication of interactivity until hover.

Considerations

• Underlined text: Only underline text that’s a link.
• Headline link: Use Link plain for headlines.
• Link color: Don’t override a link’s color. Each variant’s colors are designed to be consistent and accessible.
• Inline links: Don’t combine icons with inline links.