Link
Link que leva a pessoa para outra página, para uma parte desta página ou para um arquivo. Para ações como salvar, copiar ou excluir, use Button.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { Link } from "@camaleo/react";Anatomia
Um <a> comum. A variante de destaque coloca uma seta depois do texto. Os dois têm um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Antes de escolher um estilo, leia o guia de instalação. Leva uns cinco minutos.
Variantes
Use o link padrão dentro de frases, o discreto onde há muitos links juntos (um rodapé, uma linha de termos) e o de destaque para o próximo passo de uma seção.
Link de destaque
Ele fica sozinho numa linha, então ganha uma seta e uma área de toque de 24px de altura, fácil de acertar no celular.
Página atual num menu
Clique numa seção. O aria-current="page" avisa o leitor de tela em qual página a pessoa está; o negrito mostra isso para quem enxerga.
Abre em nova aba
Uma nova aba quebra o botão Voltar, então avise. O ícone mostra isso, e um texto escondido coloca "abre em uma nova aba" no nome que o leitor de tela lê.
Baixar um arquivo
Clique para baixar um CSV de verdade. Coloque o formato e o tamanho no texto, para a pessoa saber o que vem antes de tocar numa conexão lenta.
Faturas de outubro
Clique logo acima desta caixa e aperte Tab: a primeira parada é um link que pula o menu.
Pular para o conteúdo
Clique logo acima da caixa e aperte Tab. A primeira parada é um link escondido que aparece com o foco e pula o menu. Assim quem usa teclado não passa pelo menu em toda página.
Com o roteador do Next.js
Passe render={<NextLink href="…" />}. O roteador cuida do clique sem recarregar a página, e o link mantém o visual do estilo.
Em contexto
Links ficam onde a pessoa decide para onde ir. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Como os estilos funcionam
Cada estilo muda cores, formas e fontes pelos tokens. Seus componentes continuam iguais.
Boas práticas
Quem usa leitor de tela costuma pular de link em link. Cada um precisa fazer sentido fora da frase.
Clique aqui para baixar o relatório anual de 2025.
Numa lista de links, dez "Clique aqui" soam iguais e não dizem nada.
Use para o caminho principal de uma seção, como começar um guia.
Ações são do Button. O leitor de tela anuncia um link como "ir para algum lugar", e ninguém espera que ele mude dados.
Props
default dentro de frases, muted para links secundários e standalone para um link sozinho, com seta.render={<NextLink href="/docs" />}.Link aceita todos os atributos de <a>, como href, target, rel, download e aria-current.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio link.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O texto é o nome que o leitor de tela lê. Acrescente um texto escondido quando o ícone tem significado, como "abre em uma nova aba".
- Marque o link da página atual com aria-current="page" e não dependa só da cor para mostrar isso.
- Links de destaque têm pelo menos 24px de altura (WCAG 2.5.8). Links dentro de frases não precisam, mas deixe espaço entre links numa lista.
- Se o clique muda dados ou abre um diálogo, é um botão. Use Button, mesmo que ele pareça um link.