Link
A link takes you somewhere else: another page, another part of the same page, another site.
On this page
Playground
Opens in
Background
<a class="feitio-link" href="#playground">the November report</a>When to use
- To navigate, always, even when it looks like an action ("See all").
- Within text, or on its own line.
When not to use
- To make something happen (save, delete, send): use Button.
- For a prominent door to another area: use LinkCard.
Examples
Same tab
The default: the link takes you there, and the back button brings you back.
Show code
<a class="feitio-link" href="/agendamentos">os agendamentos desta semana</a>Read the time guide (abre em nova aba) without losing what you filled in.
New tab
The exception, only when leaving the page would make the person lose something, like a half-filled form. Always with the icon and the hidden notice.
Show code
<a class="feitio-link" href="/ajuda/horarios" target="_blank" rel="noopener">
o guia de horários<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-new-tab"/></svg>
<span class="feitio-visually-hidden"> (abre em nova aba)</span>
</a>The icon means new tab
In Feitio, an icon on a link means one thing only: it opens another tab. A link to another site that opens in the same tab gets no icon.
States
- Always underlined. Color is not enough.
- Hover: the underline thickens.
- Focus: the orange outline.
Do and don’t
Don’t
To see the report, click here.
"Click here" says nothing to someone going through the screen reader’s list of links.
Don’t
The icon promises a new tab that never opens: people learn not to trust it.
Writing
- The link text is the destination: "backup report", not "here", "learn more" or the raw address.
- The icon sits right at the end of the text, inside the link.
Accessibility
- New tab always with the hidden text "(opens in a new tab)"; the icon is
aria-hidden. target="_blank"always withrel="noopener". In React, asking for a new tab adds all three together.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-link" | required | Text orange, always underlined. |
href | URL | The destination. |
target="_blank" | only as the exception | Opens a new tab; always with the icon, the hidden text and the rel. |
rel="noopener" | with target="_blank" | The new tab’s safety. |