An inline link is an underlined text link that flows within body copy, lists and UI text. The underline is its affordance, and it is never paired with icons.
Every example on this page is the real component, not a picture. Figma: Inline link.
The link sits in a sentence, as it should. Choose size, weight, style, underline, color and state and the sentence and its code update. Hover is forced here; the link is live.
An inline link is an underlined text link that flows within body copy, lists and UI text. The underline is its affordance: it is underlined when enabled, and on hover the underline goes and the color changes. It is never paired with icons.
It inherits the typography of the text around it and shows that it can be used through the underline and the state changes. That makes it the default way to link from running text, footers, legal copy and helper text.
Inline link has four sizes (XLarge, Large, Medium and Small), four colors (Primary, Secondary, Tertiary and Inverted), three weights (Regular, Medium and Bold), an italic style and a reverse underline (underlined on hover only). It is one of three link types: see the Links guide for how to choose.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use an inline link. Specifications holds the values: tokens, sizes, states and requirements. Code shows how to add one to a page.
Use an inline link when a word or a phrase in body copy, a list or UI text should take the user somewhere or do something. Use it to:
mailto:, tel:)One line: an underlined text element that navigates to a destination while flowing inline with the surrounding content.
An inline link on its own line is a standalone link. For that use an Action link instead.
When the link is the main call to action, use a eco-button (or a link styled as a button).
Destinations that stand side by side in a grid or a scroller are Tile links.
A link always navigates. Expanding a section, opening a modal or revealing more text is not navigation: use a eco-button, or the component that owns the pattern, for example a Collapsible for expanding in place and a Modal for an overlay.
A link has no icon. An icon-only trigger is an icon button (eco-button, Icon button), and a link that needs an icon is an Action link.
Do not open a new tab by default. When a link must (target="_blank", for example a PDF), say so in the link or next to it, and add rel="noopener".
An inline link has the same style as its surrounding text: size, line height, letter spacing, weight and italic, on desktop and on mobile. It is not a way to emphasize a word: never make a link larger or bolder than its text. The Medium, Bold and Italic modifiers exist so a link can follow text that has that style.
Avoid disabled links entirely. Remove the link, or show plain text instead. A disabled <a> has no standard semantics, so an inline link has no disabled state.
The link text describes the destination and makes sense out of context: screen reader users often move through the list of links on a page. In the examples the real inline link (Small) shows exactly which words carry the link. The links go nowhere on this page. The examples are in English; on a Swedish page follow the same rules in the Swedish copy around the link.
The link text tells users where the link goes and what they get if they click, also when it is read out of context by a screen reader. Link the words that carry the meaning, such as “read our workwear size guide”. Do not link filler words such as “click here” or “more info” alone.
When a link sits in a sentence, the linked words read as part of the sentence. Never add “here” at the end as the link.
Use sentence case that matches the copy around the link, with no trailing punctuation inside the link. If the link points to a specific page, screen or feature, mirror how that destination is capitalized: “Order History” if that is the real name of the page.
A raw address is hard to read and scan and says nothing about the destination. Describe the page.
Use the fewest words that make the destination obvious, typically one to five. A link is a phrase, not a sentence, and never a whole paragraph. If the link approaches a full line, shorten the phrase, not the type size.
Avoid the same link text with different destinations on one page, such as “Read more” five times. Differentiate them.
Name the exact action or document the link opens, and for a quote or an order the stage the user is in. Include the quote number when you refer to a specific quote. Examples for common B2B flows, one example per line:
| The link… | Use |
|---|---|
| is inside a sentence or text block | Inline link |
| stands alone, with an icon | Action link |
| is a card or a logo | Tile link |
| does something in the page | eco-button |
rel="noopener".text-action-primary (Primary). The size follows the text around the link.An inline link has no icon (an Action link always has one), no padding and no background. It is a real <a href> inside the text.
Four colors. A link has the same color as the text around it: Primary, Secondary or Tertiary, and Inverted on dark surfaces. Each has its own hover color (text-action-primary-hover, text-action-secondary-hover, text-action-tertiary-hover and text-action-primary-inverted-hover). Sizes are under Sizes below; weight, italic and reverse underline follow after Inverted.
A link has the same color as the text around it. In Primary text the link is Primary, in Secondary text Secondary, in Tertiary text Tertiary. The surrounding text has the same color as the link in the examples.
On a dark surface. Use it where the Primary link would not have enough contrast.
Regular is the default. Medium (500) and Bold (600) follow the weight of the text around the link: a link in a bold text is Bold. They are not a way to emphasize a link. Any size can have any weight.
Add inline-link--italic when the text around the link is italic. The font has an italic face for every weight.
inline-link--reverse (Figma “Reverse”) has no underline when enabled and shows it on hover, like an Action link. Use it where the surrounding text already makes it clear that the words are a link; color alone is not enough (WCAG 1.4.1).
An inline link matches the context it is in: XLarge, Large, Medium or Small, aligned to body-xl, body-lg, body-md or body-sm. It must match the size, line height and letter spacing of its surrounding text, and follow the Desktop or Mobile base styles that text follows. Never make a link larger or bolder than its text for emphasis. If a link stands apart from other content, its size matches the default body copy size of the page. XLarge, Large and Medium change at 769px; Small is the same on every breakpoint. The values are under Sizes in Specifications.
An inline link is part of the text flow: it wraps with the text and takes its line height from the size.
Only inside running text: body copy, a list or UI text. A link on its own line is an Action link.
As wide as its text (display: inline).
Underlined when enabled. On hover the underline goes and the color changes. This is the reverse of the Action link, unless the reverse underline is used (underline on hover only). Token names and values are under Design Tokens in Specifications.
The underline is removed and the color changes to the hover color of the variant. The color changes over duration-fast-3 with ease-standard; the underline is not transitioned.
A click or Enter follows the link. All states are listed under States in Specifications.
A 2px ring shows on keyboard focus only (body.keyboard-nav), the same as on the Action link and the Tile link.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves between links. Enter follows the focused link.
A real <a href> is announced as a link, with its text. Write link text that makes sense out of context. Links navigate; buttons act.