An action link is a standalone link for lightweight actions like downloads and “view all” navigation, with a leading icon, a trailing icon or both. It is underlined on hover.
Every example on this page is the real component, not a picture. Figma: Action link.
Choose a size, weight, variant and state and the link and its code update. The link always has an icon: leading, trailing or both. Hover is forced here; the link itself is live.
An action link is a self-contained text link paired with icons that clarify what happens when it is activated: a leading icon, a trailing icon or both (a download icon, a chevron). It gives link-weight interactions, lighter than a button, a clear and scannable anchor outside body copy: under product descriptions, in specification sections and in lists of resources. It is used for lightweight actions like downloads and “view all” navigation, forward or backward.
One line: a standalone, iconized text link for lightweight actions and forward or backward navigation, placed outside running text.
Action link has three sizes (Large, Medium and Small), a regular and a bold weight, and two variants (Primary and Inverted). It is always paired with an icon, leading, trailing or both, in the same color as the link text. 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 action link. Specifications holds the values: tokens, sizes, states and requirements. Code shows how to add one to a page.
Use an action link for a link that stands on its own line, outside running text, when it needs more visual anchoring than an Inline link but less weight than a Button. Use it to:
mailto:, tel:)Inside a sentence the link is an Inline link. An action link has an icon, has no underline until hover and sits outside the text: it is never embedded in prose.
The main action on the surface (add to cart, check out) is a eco-button. Do not put an action link and a Button side by side for the same action: pick one weight.
Destinations that form a visual grid of equals are Tile links.
An action link navigates or downloads; it does not disclose. If the trailing chevron would open or close content in place, use a eco-button or the component that owns the pattern: a Collapsible for expanding in place and a Modal for an overlay. Do not use the chevron as a disclosure icon.
Avoid disabled links. Hide the row, or show plain non-interactive text instead (“Product sheet missing”). If a disabled state must ship, it needs aria-disabled handling, and it is exempt from the contrast minimum but must still be recognizable. The shared CSS has no disabled style.
Use a download icon for files and the trailing chevron alone for navigation. Do not use a decorative icon that promises nothing.
Stacked action links sit in one column with the same size and the same spacing on the 8px grid. Do not mix sizes or emphasis levels in one stack.
Action links can also sit side by side on one row (the Divided layout). Separate them with a vertical Divider (Tertiary), use one size and keep the same space on both sides of each divider. Without a divider the links run together and read as one phrase.
The Bold variant is the way to emphasize one link. Reserve it for at most one link per stack, and never make a link larger to emphasize it.
A label is a verb-first action phrase or a destination noun, two to five words, such as “Download product sheet” or “View all accessories”. The examples are real action links that go nowhere. They are in English; on a Swedish page follow the same rules in the Swedish copy.
The label tells users what they get. Use a bare verb (“Download”) only when one link stands alone; when several links sit together, name the object of each.
For a download, include the file type and size where they are known. They belong in the label, not in a tooltip.
All labels in a stack are verb-first, or all are nouns.
Sentence case matches the copy around the link. No punctuation ends the label.
A label stays on one line when it can. Translated strings and compound words run long, so define what happens at small widths: truncate with an ellipsis, or allow a two-line wrap.
| The link… | Use |
|---|---|
| stands alone, with an icon: “View all products”, “Download document” | Action link |
| sits inside a sentence | Inline link |
| is a card or a logo, presented graphically | Tile link |
| runs an action in the page (save, send, open a modal) | eco-button |
<a href>; for a download add the download attribute when the file is on the same origin.file_download. 24px (Large) or 20px.chevron_right, 24px (Large) or 20px. It shows forward movement.The gap between the parts is 8px (Large) or 4px (Medium and Small).
Primary on a light surface and Inverted on a dark one, each in Regular and Bold. Sizes are under Sizes below.
text-action-primary, with text-action-primary-hover on hover.
A leading icon (for example file_download) says what the link does before the text is read. Use it for downloads and similar actions. The trailing chevron shows forward movement. The icons always have the same color as the link text.
Regular is the default. Medium (500) and Bold (600) are the other weights. Use one weight in a group, and Bold for at most one link per stack. An action link is never italic.
For dark surfaces, in the inverted text colors.
Large, Medium and Small, each in Regular and Bold. Large and Medium change at 769px; Small is the same on every breakpoint. The link size matches the type size of the content it follows; a link that stands apart from other content matches the default body copy size of the page. Do not up-size a link for emphasis: use the strong (Bold) variant, at most once per stack. The values are under Sizes in Specifications.
The link is an inline flex row: the icon, the text and the chevron are centered on one line. Several links stack in one column, or sit side by side on one row with a vertical Divider between them.
On its own line, outside body text: below a list, at the end of a section or in a footer. Not inside a sentence.
As wide as its content (display: inline-flex).
No underline when enabled. On hover the text gets the underline and the color changes; the icons are never underlined. This is the reverse of the Inline link. Token names and values are under Design Tokens in Specifications.
The text is underlined and the color changes for the whole link, icons included. The color changes over duration-fast-3 with ease-standard.
A 2px ring shows on keyboard focus only (body.keyboard-nav).
A click on the text or an icon, or Enter, follows the link. The whole row is the target. All states are listed under States in Specifications.
A group of action links has two layouts, and the author chooses one on every breakpoint. Stacked puts the links in one column. Divided puts the links one after another on a row, with a vertical Divider between them, where there is room, and the row wraps onto the next line when it is full. A divided group does not turn into a column by itself on mobile: choose Stacked when the links need a column. The group classes draw the layout and the dividers.
The divider sits only between two links on the same line: when the row wraps, no divider is left at the start or the end of a line. Use the classes action-link-group--stacked and action-link-group--divided.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves between links. Enter follows the focused link. The focus ring shows on keyboard focus.
A real <a href> is announced as a link, with its text. The icons are aria-hidden, so the link text must say where the link goes.