ECO has three link types: inline link, action link and tile link. Read this guide before you build a link.
Choose the type below, then open the page for it: Inline link, Action link, Tile link. Every example is the real component. Figma: Links usage guidelines.
Links take users somewhere: to another page, to another site, to a section of the same page, or to a resource such as a PDF, an email address or a phone number. They are the lightest interactive element in the ECO Design System. Where a Button performs an action, a link always navigates.
The system has three link components: Inline link, Action link and Tile link. They share the same foundation (semantics, keyboard behavior and state logic) and serve different contexts. Choosing the right one comes down to where the link lives and how much visual weight it needs. Read this guide before you build a link.
Use a link when the user should:
mailto:) or a phone number (tel:)A link navigates; a button acts. For an action in the page (save, send, open a modal) use eco-button.
Every type has a weight (Regular by default, Medium and Bold). The Inline link and the Tile link also have an italic style, so a link can follow the text around it; the Action link is never italic. The Inline link also has a reverse underline (underline on hover only).
This page chooses the type and shows them together. Each type has its own three pages: Examples & Guidelines, Specifications and Code. Open one from the table below or from the navigation.
Choose the type by where the link sits first, and by how prominent it must be second.
| Type | Where | Underline | Icons | Example |
|---|---|---|---|---|
| Inline link | Inside a sentence or text block | On when enabled, off on hover | Never | Read more on the product page. |
| Action link | Standalone, not in body text | Off when enabled, on on hover | Leading and/or trailing | View all products |
| Tile link | Graphical and prominent, like a card or button | None | With or without | Work wear |
Ask in this order and take the first yes.
eco-button.The three types together, as they would be used on a page.
All three link types share one interaction model: the entire element is the click target, Tab moves focus and Enter activates.
| Topic | Result |
|---|---|
| Mouse | Click anywhere on the link: the text, an icon or the whole tile. |
| Keyboard | Tab moves focus and shows the focus ring. Enter activates the link. |
| Markup | A real <a href> in every case. Links navigate; buttons act. |
| Motion | Color changes over duration-fast-3 with ease-standard. |
| Sizing | Sizes follow the type scale. A link inside content matches the size of the text around it (Inline link, Large, Medium or Small). A standalone link matches the default body copy size of the page. |
The link text says where the link goes, for every type. A vague text does not help the user, and a screen reader reads links out of context.
Links that sit together are the same type, so the group reads as one set.
A link goes somewhere. For an action in the page use eco-button.
eco-button for actions that do not navigate.