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.
How to add an action link to a page. The file is components/css/action-link.css.
Link the shared stylesheet once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/action-link.css">. Both templates already have it. The page needs the Material Symbols Outlined font. |
| 2. Markup | A real <a href> with class="action-link action-link--medium". |
| 3. Label | Wrap the text in <span class="action-link__label">, so the icons never get the underline. |
| 4. Icons | Add <span class="action-link__icon" aria-hidden="true">chevron_right</span>, and a leading icon when needed. The link has at least one icon: for a link with no icon in a text use an Inline link (also its reverse underline, inline-link--reverse). |
| 5. Variant | Add action-link--bold, --weight-medium or --inverted (on a dark surface). |
Copy the markup you need. Hover comes from :hover; the [data-state] selectors in the CSS exist only so the documentation can force a state.
| Class | Use |
|---|---|
action-link | The link. |
action-link--large, --medium, --small | Size. |
action-link--bold, --weight-medium | Bold or Medium weight. Regular is the default. |
action-link--inverted | For a dark surface. |
action-link__label | The text. Carries the hover underline. |
action-link__icon | An icon. |
action-link-group, --stacked | A group in one column, 8px between the links. |
action-link-group--divided | A group on one row with a vertical divider between the links, wrapping where the row is full. |
action-link__label: text-decoration on the link itself would also underline the icons.action-link__icon is not styled: the CSS reverts it to the browser’s default link on purpose. Use an Inline link (inline-link--reverse for underline on hover only) when no icon is wanted.overflow: hidden with 4px of padding (and the same negative margin) so the focus ring is not cut off. The links must be direct children of the group (or wrapped one level, such as li)..action-link::after is an invisible layer that grows the clickable area of a Small link (20px) and of a Medium link on mobile (22px) without changing the drawn size. Keep 8px between stacked links.body.keyboard-nav, which the templates set on the first Tab press.[data-state] selectors do nothing outside the documentation pages.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.