Intro
O Link é um componente de navegação que direciona o usuário para outro destino — seja uma página interna, externa, âncora na mesma página ou recurso digital.
Ele representa mudança de contexto, diferente do Button, que representa execução de ação.
No Design System, o Link é classificado como:
- Componente de Navegação
- Elemento textual interativo
- Estrutura semântica baseada em
<a>
Anatomia Visual
Estrutura Base
- Texto do Link
- Rótulo descritivo
- Deve indicar claramente o destino
- Ícone (Opcional)
- Ícone externo (quando abre nova aba)
- Ícone direcional
- Ícone de download
- Indicador Visual
- Sublinhado
- Cor diferenciada
- Mudança de estado no hover
Anatomia Estrutural
1 — Container (<a>)
1.1 — Texto
1.2 — Ícone opcional
Características
Comportamento
- Redireciona para outro destino
- Pode abrir:
- Mesma aba (padrão)
- Nova aba (
target="_blank")
- Pode apontar para:
- URL interna
- URL externa
- Arquivo
- Âncora
Tipos de Link
- Link Interno
- Navegação dentro do domínio
- Link Externo
- Direciona para outro domínio
- Deve indicar visualmente (ícone externo opcional)
- Link de Download
- Arquivos (PDF, XLS etc.)
- Pode incluir tamanho do arquivo
- Link Âncora
- Navegação interna na página
- Link Inline
- Inserido dentro de parágrafo
- Link Destacado
- Estilo visual mais forte
- Pode ter ícone
Uso
Quando usar
- Navegação entre páginas
- Referência externa
- Download de arquivo
- Complemento de texto
Quando não usar
- Para executar ações (usar Button)
- Para abrir modais (usar Button)
- Como elemento de CTA primário isolado
- Para interações que não mudam contexto
Boas Práticas
✅ Faça
- Use textos descritivos
- Correto: “Baixar relatório anual (PDF)”
- Incorreto: “Clique aqui”
- Diferencie visualmente links do texto comum
- Garanta contraste mínimo 4.5:1
- Use ícone para links externos quando relevante
- Mantenha comportamento consistente
❌ Não faça
- Não use link como botão estilizado
- Não remova estado de foco
- Não use apenas cor para indicar interatividade
- Não use texto genérico
- Não abra nova aba sem necessidade
Erros Comuns
- Usar link para ação (ex: salvar formulário)
- Usar botão para navegação simples
- Links invisíveis (mesma cor do texto)
- Ausência de estado visited
- Não indicar download de arquivo
Resumo
O Link é o principal componente de navegação textual da interface.
Ele deve:
- Comunicar destino claramente
- Manter semântica correta
- Garantir acessibilidade
- Ser visualmente distinguível
- Não ser confundido com botão
A distinção clara entre Link (navegação) e Button (ação) é essencial para a consistência do Design System.