Link
Permite navegar para outra página ou seção, ou executar uma ação secundária, com menor peso visual do que um botão.
- Navegar dentro do painel: ir para outra página ou seção relacionada, sem executar nenhuma ação sobre o elemento atual. Ex.: "Ver detalhe", "Gerenciar assinatura".
- Navegar para um site ou aplicativo externo: levar para fora do painel, sempre acompanhado de um ícone que sinalize a saída. Ex.: "Ver central de ajuda", "Ler a documentação".
- Executar uma ação secundária com menor peso visual: por meio de as="button", para ações que não precisam da hierarquia de um botão. Ex.: "Adicionar", "Copiar domínio".
- Inserir um link dentro de um bloco de texto: dentro de um parágrafo, um alerta ou a mensagem de um erro, mantendo a estrutura do texto ao redor. Ex.: "Tentar novamente" dentro do aviso de um pedido com erro.
- Executar a ação principal de uma tela ou de um formulário: que precisa de maior peso visual e hierarquia. Usar Button nesses casos. Ex.: "Criar produto", "Salvar alterações".
- Representar uma ação apenas com um ícone, sem texto visível: usar Icon button com seu aria-label nesses casos. Ex.: excluir, editar ou fechar em uma linha.
- Text: conteúdo do link; descreve a ação ou o destino da navegação.
- Icon: opcional, posicionado antes ou depois do texto, que reforça a ação ou sinaliza que o destino é externo.
Primary: destaca links relevantes para a navegação, com a cor de marca. Ex.: "Gerenciar assinatura", "Ver detalhe".
Neutral: para links de menor hierarquia ou ações dentro de contêineres cuja superfície o exija por contraste. Costuma ser usado em combinação com a variante sublinhado. Ex.: "Conhecer custos" dentro de um Alert.
Danger: sinaliza uma ação destrutiva, quando um Button danger teria mais peso visual do que o necessário. Ex.: "Excluir dados do cliente".
Neutral background: exclusivamente para superfícies escuras ou coloridas, onde o link precisa contrastar com um fundo não claro. Ex.: "Voltar" dentro de um Product Update.
Underline: sublinha o texto; reforça a condição de link quando convive com texto simples. Ex.: um link inserido em um parágrafo.
None: sem sublinhado; usar quando a cor e o contexto já identificam o link. Ex.: um link de navegação em uma linha de tabela com nome de produto.
Caption: tamanho reduzido, para links de apoio ou texto secundário. Ex.: um link dentro do texto de ajuda de um campo.
Base: tamanho padrão, alinhado ao corpo de texto padrão. Ex.: um link em uma linha de tabela.
Highlight: tamanho ampliado, para links que precisam de maior destaque. Ex.: o CTA de um estado vazio.
a: valor padrão; renderiza um elemento <a> para navegar até uma URL.
button: renderiza um elemento <button> para executar uma ação sem navegar.
O link aparece inserido em parágrafos de ajuda ou de erro, como valor acionável em linhas de tabelas e listas, e dentro de alertas que oferecem uma ação de continuidade.
Pedido #1042
João Silva
Acompanhar todo link para uma URL externa com um ícone que sinalize a abertura de outro site ou aplicativo.
Evitar omitir o ícone em links externos ou posicioná-lo antes do texto.
Usar ícones com relação direta e evidente com a ação do link.
Evitar ícones cuja relação com a ação do link não seja evidente.
- Foco visível: ao navegar com o teclado, o link mostra um anel de foco (:focus-visible) que indica o elemento ativo.
- Elemento correto de acordo com a intenção: usar as="a" para navegar (renderiza <a>) e as="button" para executar uma ação (renderiza <button>), de modo que o teclado e o leitor de tela anunciem o papel esperado.
- Estado desabilitado: o atributo disabled só tem efeito com as="button"; para uma navegação indisponível, não renderizar o link em vez de mostrá-lo inativo.
- Informação não dependente da cor: sinalizar os links externos com um ícone que reforça a mensagem, além da cor, para que a condição de link não dependa unicamente da cor.
- Texto descritivo: o texto do link descreve a ação ou o destino por si só. Ex.: "Editar categorias" em vez de "Categorias".
Instale o componente via terminal.
npm install @nimbus-ds/linkimport React from "react";
import { Link } from "@nimbus-ds/components";
const Example: React.FC = () => <Link as="a">Ver detalle</Link>;
export default Example;As propriedades adicionais são repassadas ao elemento <Link>. Consulte a documentação do elemento a para ver a lista de atributos aceitos.
- Button — Para iniciar ações ou avançar em um processo com maior peso visual.
- Icon button — Para uma ação representada apenas por um ícone, sem texto visível.
- Text — Para o bloco de texto que pode conter um link inserido.
Link
| Name | Type | Default | Description |
|---|---|---|---|
as | 'a' | 'a' | The underlying element to render — either a HTML element name or a React component. |
children* | React.ReactNode | The content of the link. | |
appearance | 'danger' | 'neutral' | Change the visual style of the link. |
textDecoration | 'line-through' | 'neutral' | The textDecoration property specifies the decoration added to link. |
fontSize | 'base' | 'base' | The fontSize property sets the size of the link. |
lineHeight | 'base' | 'base' | The lineHeight property specifies the line height of the link |
Link.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.