Link

Leva para outra tela, âncora ou endereço externo, sem disparar uma ação.

O Link navega; o Button age. Use link para "Ver Pedidos" ou "Abrir Página pública", e botão para "Publicar Marca". A fachada tem dois: o Link do HeroUI v3 (texto com seta opcional) e o ExternalLink do PrivateLab, o único lugar onde o Admin escreve um <a> para fora do roteador (e-mail, Página pública, âncora).

import { ExternalLink, Link } from "@rastreio-x/ui";

Padrão

Link.Icon desenha a seta de destino. Omita o ícone em links dentro de frases.

Ver Pedidos

Dentro de texto

Em parágrafos, o link herda o tamanho do texto e se distingue pelo sublinhado e pela cor de link, nunca só pela cor.

O Pedido foi aceito pela Fonte. Veja a Jornada publicada ou volte para a lista de Fontes.

Ícone próprio

Passe outro ícone de @rastreio-x/ui/icons como filho de Link.Icon, com aria-hidden.

Ir para a Jornada

Endereço externo

Para fora do produto, use target="_blank" com rel="noopener noreferrer" e avise o leitor de tela com um sr-only.

Abrir Página pública

Desabilitado

isDisabled bloqueia o ponteiro e o teclado. Diga ao lado por que o destino não está disponível.

Ver Página pública

Disponível depois de publicar a Marca.

ExternalLink em texto

ExternalLink usa o token de link (contraste 4,5:1 e foco visível). Endereços http(s) abrem em nova aba e anunciam "abre em nova aba"; mailto: e âncoras ficam na mesma aba.

suporte@pluma.example Abrir a Página pública do Pedido

ExternalLink como botão

as="button" troca a aparência para a de um botão, com as variantes primary, secondary e ghost. Continua sendo um link: o destino abre no navegador, não dispara onPress.

Ver Página pública Ver Jornada Fontes

Pedidos Pedidos Pedidos

Anatomia

Link
└── Link.Icon

Link: o <a> com o rótulo.
Link.Icon: a seta (ou o ícone passado como filho).

O ExternalLink é uma peça só: <a> com classes de token, e o aviso sr-only quando abre em outra aba.

Propriedades

Link:

Link
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`autoFocus`	`boolean`	-	Foca o elemento ao renderizar.
`children`	`ChildrenOrFunction<LinkRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<LinkRenderProps>`	`'react-aria-Link'`	Classes CSS aplicadas ao elemento.
`download`	`string \| boolean`	-	Faz o navegador baixar o arquivo do link; um texto sugere o nome.
`href`	`string`	-	URL de destino do link.
`hrefLang`	`string`	-	Idioma do recurso do link.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`onPress`	`((e: PressEvent) => void)`	-	Chamada ao soltar o clique, o toque ou a tecla sobre o elemento.
`ping`	`string`	-	URLs notificadas quando o link é seguido.
`referrerPolicy`	`React.HTMLAttributeReferrerPolicy`	-	Quanto da origem (referrer) enviar ao seguir o link.
`rel`	`string`	-	Relação entre a página atual e o recurso do link.
`render`	`((props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpa…`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`routerOptions`	`undefined`	-	Opções do roteador do lado do cliente.
`style`	`StyleOrFunction<LinkRenderProps>`	-	Estilos em linha aplicados ao elemento.
`target`	`React.HTMLAttributeAnchorTarget`	-	Janela de destino do link (`_blank`, `_self`).

Link.Icon:

Link.Icon
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.

ExternalLink:

ExternalLink
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`href`*	`string`	-	URL de destino do link.
`as`	`'text' \| 'button'`	`"text"`	Aparência do link: `text` (padrão) ou `button`.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`size`	`'lg' \| 'md' \| 'sm'`	-	Tamanho do componente.
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`"secondary"`	Variante visual do componente.

Animações

CSS
indicativo

O Link anima só a cor e o sublinhado no hover, em transição curta de CSS. O ExternalLink não anima: o selo de movimento detectado para ele vem de arquivos que compartilham o módulo page.tsx, não do componente. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms.

Acessibilidade

É um <a href>: Enter ativa, e o clique do meio e "Abrir em nova aba" funcionam.
O rótulo diz o destino ("Ver Pedidos"), nunca "clique aqui".
Link que abre nova aba anuncia isso (sr-only), como faz o ExternalLink por padrão.
O foco visível usa o token --focus; o contraste do texto de link é de 4,5:1.
Um link desabilitado sai da ordem de tabulação; explique o motivo no texto vizinho.

Boas práticas

Faça

Rótulo que diz o destino, link para navegar e botão para agir.

Evite

Link que dispara uma ação (publicar, excluir) ou rótulo vago como “clique aqui”.

Dentro do Admin, navegue entre telas com o Link do roteador estilizado; use ExternalLink para tudo que sai do roteador.
Não esconda a seta de um link que sai do produto.
Não use link para alternar visões do mesmo contexto: prefira Tabs ou Segment.

Relacionados

Button para ações.
Breadcrumbs para a trilha entre páginas.
Tabs para alternar visões do mesmo objeto.