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.
Tokens, sizes, states and requirements. Values come from the live token package and from Figma: Action link.
Resolved from the live token package.
| State | Part | Token | Value |
|---|
| Size | Type token | Desktop (769px+) | Mobile and tablet | Gap | Icon |
|---|---|---|---|---|---|
| Large | body-lg | 20/28, 0.18px | 18/24, 0.18px | 8px | 24px |
| Medium | body-md | 17/24, 0.32px | 16/22, 0.32px | 4px | 20px |
| Small | body-sm | 14/20, 0.36px | 14/20, 0.36px | 4px | 20px |
sm (640 to 768px) looks like mobile. Small is the same on every breakpoint. Weight is 400 (Regular) or 600 (Bold: Figma 700 minus 100 in this CSS).
| Attribute | Large | Medium | Small |
|---|---|---|---|
| Height | The line height: 28px desktop, 24px mobile | 24px desktop, 22px mobile | 20px |
| Gap between icon and text | 8px | 4px | 4px |
| Icon size | 24px | 20px | 20px |
| Padding and margin | None | ||
| Hit area (invisible) | 28px / 24px (the link itself) | 24px (22px on mobile: grown by 2px) | 24px (20px: grown by 4px) |
| Focus ring | 2px, 2px outside the link | ||
An action link has no padding or margin of its own, so there is no measurement figure.
The gap as a spacing token.
| Part | Value |
|---|---|
| Gap, Large | space-8 |
| Gap, Medium and Small | space-4 |
| Focus ring offset | 2px |
Enabled has no underline: the placement and the icons carry the affordance. This is the reverse of the Inline link, whose underline is what tells it apart from the text it sits next to; an action link stands alone and is never embedded in prose. Hover is a color shift, and the underline appears under the label; the icons are never underlined. There is no Disabled state: hide the row or show plain text (see Usage). Hover is forced on this page; in your code it comes from :hover.
| State | Primary | Primary bold | Inverted | Inverted bold |
|---|
| Size | Type token | font-feature-settings |
|---|---|---|
| Large | body-lg | ss02, ss03 |
| Medium | body-md | ss02, ss03, ss06 |
| Small | body-sm | ss02, ss03, ss06 |
| Modifier | Class | CSS |
|---|---|---|
| Regular | (none) | font-weight: 400 |
| Medium | action-link--weight-medium | font-weight: 500 |
| Bold | action-link--bold | font-weight: 600 |
Figma weights are 100 higher than the CSS (see eco-typography). The font package ships 300, 400, 500 and 700.
Breuer Condensed. Sizes and line heights are under Sizes.
| Element | Class | Notes |
|---|---|---|
| Link | action-link | A real <a href>, display: inline-flex. |
| Label | action-link__label | Always wrap the text in this span: the underline sits on it, so the icons never get one. |
| Icon | action-link__icon | A Material Symbol, aria-hidden. Leading, trailing (the chevron) or both; at least one. |
| Size | action-link--large, --medium, --small | |
| Weight, variant | action-link--bold, --inverted | Regular and Primary are the defaults. |
| Type | Class | Use |
|---|---|---|
| Primary | action-link | Light surfaces. |
| Inverted | action-link action-link--inverted | Dark surfaces. |
As wide as its content.
| Property | Duration | Easing |
|---|---|---|
color | duration-fast-3 | ease-standard |
The underline is not transitioned.
| Input | Result |
|---|---|
| Click text or icon | Follows the link. The whole row is the target. |
| Enter | Follows the focused link. |
| Tab | The 2px focus ring shows on keyboard focus only (body.keyboard-nav). |
| Icons | Never underlined: the underline is on .action-link__label only. |
| Group of links | Stacked (action-link-group--stacked): one column, 8px between the links. Divided (action-link-group--divided): one row, a vertical divider only between two links on the same line, wrapping where the row is full. The author chooses the layout; it does not change with the breakpoint. |
| Disabled | None. Hide the row or show plain text. If a disabled state must ship: aria-disabled="true", exempt from the contrast minimum but still recognizable. |
| Markup | A real <a href>. Icons are aria-hidden. |
| Topic | Requirement |
|---|---|
| Element | A real <a href>, also for a download (add the download attribute when the file is on the same origin). If an instance triggers a JavaScript action with no navigation, it must be a <button> styled the same way: never fake it with an <a>. |
| Name | The visible label, extended where needed so it still begins with the visible text (WCAG 2.5.3 Label in Name): “Download product sheet, PDF 2 megabytes”. Both icons are decorative: aria-hidden="true", no alt text (WCAG 2.4.4). |
| Downloads | Announce the file behavior in the accessible name: do not rely on the icon alone. |
| Target size | A standalone link needs at least 24×24px (WCAG 2.5.8), and at least 8px between stacked links. The drawn size stays 20px (Small) and 22px (Medium on mobile), but an invisible layer (.action-link::after, at least 24px high) makes the clickable area 24px. Keep at least 8px between stacked links so the areas do not overlap. |
| Focus | A 2px ring around the whole link with border-focus (4.9:1 on white) and 2px offset, on keyboard focus (WCAG 2.4.7, 1.4.11). |
| Color | The default state has no underline, so the icons and the placement are the affordance. An action link must therefore never appear inside body copy, where it would rely on color alone (WCAG 1.4.1). |
| Contrast | Label and icons need at least 4.5:1 in the default and hover states (WCAG 1.4.3). On white: Primary 21:1, Primary hover (#737373) 4.7:1 (4.4:1 on #f6f6f6), Inverted on black 21:1 and Inverted hover about 12:1. Open point: Inverted hover on a mid-gray such as #737373 is 2.8:1. Confirm with design. |