Link

O mk-link é o componente para navegação inline e ações de texto do Makuco UI. Suporta renderização como <a> ou <button>, tratamento de sublinhado e integração segura com target="_blank".

Uso básico

import { MkLink } from '@db1/makuco-ui-react';

<MkLink href="/destino">Visitar página</MkLink>

<mk-link href="/destino">Visitar página</mk-link>

Sublinhado

Controle a exibição do sublinhado com a prop underline.

<MkLink href="#" underline="always">Sempre sublinhado</MkLink>
<MkLink href="#" underline="hover">Sublinhado no hover</MkLink>
<MkLink href="#" underline="none">Sem sublinhado</MkLink>

<mk-link href="#" underline="always">Sempre sublinhado</mk-link>
<mk-link href="#" underline="hover">Sublinhado no hover</mk-link>
<mk-link href="#" underline="none">Sem sublinhado</mk-link>

Como botão

Use component="button" quando o link disparar uma ação JavaScript em vez de navegar para uma URL.

<MkLink component="button" onMkClick={handleAction}>
  Ação inline
</MkLink>

<mk-link component="button" (mkClick)="handleAction()">
  Ação inline
</mk-link>

Abrir em nova aba

Quando target="_blank" é definido sem rel, noopener noreferrer é aplicado automaticamente.

<MkLink href="https://db1.com.br" target="_blank">
  Abrir em nova aba
</MkLink>

<mk-link href="https://db1.com.br" target="_blank">
  Abrir em nova aba
</mk-link>

Desabilitado

<MkLink href="#" disabled>Link desabilitado</MkLink>

<mk-link href="#" [disabled]="isDisabled">Link desabilitado</mk-link>

Quando usar

Use mk-link quando:

• O texto é navegável e está inserido em um parágrafo (ex.: "Leia nossa política de privacidade").
• A ação é orientada a navegação.
• O contexto possui texto denso e um botão quebraria o fluxo de leitura.

Prefira alternativas quando:

• A ação é primária e precisa se destacar — use mk-button.
• O link está isolado, sem texto ao redor — um botão ghost ou text comunica melhor.
• A ação é destrutiva ou irreversível — botões carregam mais peso visual e semântico.

Anatomia

Variantes

• Sempre sublinhado (underline="always"): sublinhado sempre visível, independente do estado. Variante mais acessível — recomendada para leitura densa.
• Sublinhado no hover (underline="hover"): sublinhado aparece somente no hover. Atenção: em dispositivos touch o hover não existe — o link ficará sem sublinhado no mobile. Use apenas quando a cor sozinha for suficiente para identificar o link.
• Sem sublinhado (underline="none"): sem sublinhado em nenhum estado. Use com critério — a cor passa a ser o único diferenciador. Reservado para contextos onde a natureza do link já é clara pela interface (menus de navegação, breadcrumbs).

Comportamento

Hover ativa o estado de hover. Ao clicar, o estado active é exibido momentaneamente antes da navegação. Teclado: Tab para focar, Enter para ativar. O estado visitado (quando o usuário já acessou aquele destino) não está contemplado neste estilo — se o contexto exigir distinção entre links visitados e não visitados, o estilo :visited deverá ser definido separadamente.

Estados

Composição

O link inline é sempre parte de um bloco de texto maior — nunca aparece sozinho na interface. Quando a ação merece mais destaque, prefira mk-button com variante ghost ou text. Quando o link precisar vir acompanhado de um ícone (ex.: link externo com seta), verifique se mk-link atende o caso antes de compor manualmente ícone + texto.

Props

Eventos

Acessibilidade

• Usa <a> ou <button> nativo — suporte a teclado incluso sem ARIA extra.
• aria-disabled="true" é aplicado quando disabled, mantendo o elemento visível para leitores de tela.
• Para âncoras desabilitadas, tabIndex="-1" remove o elemento do fluxo de foco.
• noopener noreferrer é adicionado automaticamente em links target="_blank" para evitar vazamento de window.opener.
• Use component="a" para destinos de navegação e component="button" para ações JavaScript.

Rótulos e identificação: o texto do link deve descrever o destino por si só, sem depender do contexto ao redor. Leitores de tela navegam pelos links da página isoladamente — um texto genérico não comunica nada nesse contexto.

Estado desabilitado: prefira esconder o link ou substituir por texto informativo. Se precisar usar o estado desabilitado, sempre acompanhe com mensagem ou tooltip explicando por que a ação não está disponível.