# Link
A link takes you somewhere else: another page, another part of the same page, another site.
## Playground
```html
the November report
```
## 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
```html
os agendamentos desta semana
```
### 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
```html
o guia de horários
(abre em nova aba)
```
## 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
Do
See the [November backup report](#padroes).
The link text says where it goes, even read out of context.
Don’t
To see the report, [click here](#padroes).
"Click here" says nothing to someone going through the screen reader’s list of links.
Do
[See the Feitio showcase](#padroes)
Another site, in the same tab: no icon.
Don’t
[See the Feitio showcase](#padroes)
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 with `rel="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.