# Link

O link leva a outro lugar: outra página, outra parte da mesma página, outro site.

## Playground

```html
<a class="feitio-link" href="#playground">o relatório de novembro</a>
```

## Quando usar

-   Para navegar, sempre, mesmo que pareça uma ação ("Ver todos").
-   No meio do texto, ou sozinho numa linha.

## Quando não usar

-   **Para fazer algo acontecer** (salvar, apagar, enviar): use Button.
-   **Para uma porta com destaque** para outra área: use LinkCard.

## Exemplos

### Na mesma aba

O padrão: o link leva, e o botão voltar traz de volta.

Mostrar código

```html
<a class="feitio-link" href="/agendamentos">os agendamentos desta semana</a>
```

### Em nova aba

A exceção, só quando sair da página faria a pessoa perder algo, como um formulário preenchido pela metade. Sempre com o ícone e o aviso escondido.

Mostrar código

```html
<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>
```

## O ícone quer dizer nova aba

No Feitio, o ícone no link quer dizer uma coisa só: abre em outra aba. Um link para outro site que abre na mesma aba não leva ícone.

## Estados

-   **Sempre sublinhado.** A cor não basta.
-   **Mouse por cima:** o sublinhado engrossa.
-   **Foco:** o contorno laranja.

## Bons e maus padrões

Faça assim

Veja o [relatório de backups de novembro](#padroes).

O texto do link diz para onde ele leva, mesmo lido fora da frase.

Não faça

Para ver o relatório, [clique aqui](#padroes).

"Clique aqui" não diz nada a quem navega pela lista de links do leitor de tela.

Faça assim

[Veja a vitrine do Feitio](#padroes)

Outro site, na mesma aba: sem ícone.

Não faça

[Veja a vitrine do Feitio](#padroes)

O ícone promete uma aba nova que não abre: a pessoa aprende a não confiar nele.

## Como escrever

-   O texto do link é o destino: "relatório de backups", não "aqui", "saiba mais" ou o endereço cru.
-   O ícone vem colado no fim do texto, dentro do link.

## Acessibilidade

-   Nova aba sempre com o texto escondido "(abre em nova aba)"; o ícone é `aria-hidden`.
-   `target="_blank"` sempre com `rel="noopener"`. No React, pedir nova aba põe os três juntos.

## Atributos

Atributo

Valores

Para quê

`class="feitio-link"`

obrigatório

Laranja de texto, sempre sublinhado.

`href`

URL

O destino.

`target="_blank"`

só na exceção

Abre em nova aba; sempre com o ícone, o texto escondido e o `rel`.

`rel="noopener"`

com target="\_blank"

A segurança da nova aba.