Link
O link leva a outro lugar: outra página, outra parte da mesma página, outro site.
Nesta página
Playground
Abre em
Fundo
<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
<a class="feitio-link" href="/agendamentos">os agendamentos desta semana</a>Leia o guia de horários (abre em nova aba) sem perder o que já preencheu.
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
<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.
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.
"Clique aqui" não diz nada a quem navega pela lista de links do leitor de tela.
Não faça
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 comrel="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. |