BaseLink

Leva para outra página ou outro site. Para disparar uma ação na mesma tela, use um botão.

Ver contratoPortal do TJES (abre em nova aba)Ver todas as medições

Uso

• Sozinho (padrão): fora de uma frase, como "Ver todas as obras" no rodapé de um cartão. Sublinha ao passar o mouse.
• No texto (inline): dentro de uma frase. Fica sempre sublinhado, para a cor não ser a única pista.
• Externo (external): endereço fora do sistema. Abre em nova aba, mostra o ícone e avisa o leitor de tela.
• O texto diz para onde o link leva: "Ver contrato 012/2026", não "Clique aqui" nem "Saiba mais".
• Link navega; botão age. Salvar, excluir e enviar são sempre botões.

No texto

Antes de cadastrar, confira o modelo de contrato e a resolução no portal do TJES (abre em nova aba).

Estados

PadrãoDesabilitadoExterno desabilitado

Desabilitado, o link externo perde o ícone e o aviso de nova aba, porque não abre nada.

Use disabled só quando o destino ainda não existe para aquele item, como o relatório de uma medição não enviada. Na maioria dos casos, é melhor esconder o link.

Tamanhos

Pequeno · 13 pxMédio · 14 px

No texto, o link usa o tamanho da frase e ignora size.

Estilo

Propriedade	Token
Cor	--tj-link-primary, hover e pressionado --tj-link-primary-hover
Cor desabilitado	--tj-icon-secondary
Sublinhado	1 px; 2 px ao pressionar e, no texto, ao passar o mouse
Texto	--tj-text-sm (13 px) e --tj-text-md (14 px), peso --tj-weight-medium quando sozinho
Espaço até o ícone	--tj-space-1
Foco	Contorno sólido de 2 px --tj-border-interactive a 2 px do texto, mais o halo --tj-ring; raio --tj-radius-sm
Transição	--tj-duration-fast-02, --tj-easing-standard; desligada com movimento reduzido

As cores trocam sozinhas no tema escuro ([data-theme="dark"]).

O protótipo v3 não desenha links; ele só cita o TjLink na especificação. O visual do BaseLink foi criado aqui, com os tokens de papel do sistema, e não é uma cópia do protótipo.

Código

<BaseLink href="/contratos/12">Ver contrato 012/2026</BaseLink>
<BaseLink href="https://www.tjes.jus.br" external>Portal do TJES</BaseLink>
<p>Confira o <BaseLink href="/modelos/contrato" inline>modelo de contrato</BaseLink> antes de enviar.</p>

Propriedade	Tipo	Padrão	Descrição
href	string	—	Destino: caminho interno ou endereço completo. Obrigatório
external	boolean	false	Abre em nova aba com rel="noopener noreferrer", ícone e aviso ao leitor de tela
size	'sm' | 'md'	'md'	Tamanho do texto do link sozinho
inline	boolean	false	Link dentro de uma frase, sempre sublinhado
disabled	boolean	false	Tira o destino; o link sai da ordem do Tab e ignora cliques
label	string	—	Texto do link quando não há conteúdo no slot

Evento: click. Atributos nativos, como aria-current e download, passam para o <a>. No link externo, target e rel são sempre do componente: um rel ou target vindo de fora não tira o noopener noreferrer.

Não use aria-label: o texto visível já é o nome do link, e quem comanda o computador pela voz fala o que vê na tela (WCAG 2.5.3). Se for inevitável, no link externo o componente acrescenta "(abre em nova aba)" ao aria-label. Todo link precisa de texto, no slot ou em label.

Acessibilidade

• É um <a href> nativo, como pede o padrão de link do WAI-ARIA APG: entra na ordem do Tab e Enter abre o destino.
• O link externo ganha o texto escondido "(abre em nova aba)" no nome acessível. O ícone é decorativo e fica fora da leitura.
• No texto, o sublinhado distingue o link da frase; a cor nunca é a única pista.
• Desabilitado, o link perde o href, recebe role="link" e aria-disabled="true" e sai da ordem do Tab.
• O foco aparece com um contorno sólido de 2 px (contraste de 3:1 ou mais, WCAG 1.4.11) e o halo --tj-ring por fora. No modo de alto contraste do sistema, o contorno usa a cor Highlight. Num link que quebra linha, o contorno fecha em cada linha.
• No link externo que quebra linha, o ícone fica junto da última palavra.
• Testado com axe em: padrão, pequeno, externo, externo pequeno, desabilitado, externo desabilitado, texto vindo de label e, dentro de uma frase, no texto, no texto externo, no texto com size e no texto desabilitado.