Componentes
Link
CTA inline com indicador de seta. Diferente de âncora simples — pattern de "saiba mais", "ver detalhes".
Sizes
Três escalas alinhadas ao volume textual da peça.
Saiba mais Ver detalhes Continuar leitura
<Link size="xs" text="Saiba mais" />
<Link size="sm" text="Ver detalhes" />
<Link size="lg" text="Continuar leitura" />
<Link size="xs" text="Saiba mais" />
<Link size="sm" text="Ver detalhes" />
<Link size="lg" text="Continuar leitura" /> <template>
<a href="#" class="itps-link text-xs">Saiba mais →</a>
<a href="#" class="itps-link text-sm">Ver detalhes →</a>
<a href="#" class="itps-link text-lg">Continuar leitura →</a>
</template>
<template>
<a href="#" class="itps-link text-xs">Saiba mais →</a>
<a href="#" class="itps-link text-sm">Ver detalhes →</a>
<a href="#" class="itps-link text-lg">Continuar leitura →</a>
</template> <>
<a href="#" className="itps-link text-xs">Saiba mais →</a>
<a href="#" className="itps-link text-sm">Ver detalhes →</a>
<a href="#" className="itps-link text-lg">Continuar leitura →</a>
</>
<>
<a href="#" className="itps-link text-xs">Saiba mais →</a>
<a href="#" className="itps-link text-sm">Ver detalhes →</a>
<a href="#" className="itps-link text-lg">Continuar leitura →</a>
</> <a href="#" class="itps-link text-xs">Saiba mais →</a>
<a href="#" class="itps-link text-sm">Ver detalhes →</a>
<a href="#" class="itps-link text-lg">Continuar leitura →</a>
<a href="#" class="itps-link text-xs">Saiba mais →</a>
<a href="#" class="itps-link text-sm">Ver detalhes →</a>
<a href="#" class="itps-link text-lg">Continuar leitura →</a> Estados
Default azul, hover coral com underline, disabled cinza.
Default Disabled
<Link href="#" text="Default" />
<Link href="#" text="Disabled" disabled />
<Link href="#" text="Default" />
<Link href="#" text="Disabled" disabled /> Sobre fundo escuro
Use isNegative em superfícies dark. Texto e underline em branco.
<Link href="#" text="Saiba mais" isNegative />
<Link href="#" text="Saiba mais" isNegative /> Com ícones
Padrão: seta direita. Override via leftIcon / rightIcon ou showRightIcon={false}.
Download Sem seta
<Link text="Download" leftIcon="download" rightIcon="open_in_new" />
<Link text="Sem seta" showRightIcon={false} />
<Link text="Download" leftIcon="download" rightIcon="open_in_new" />
<Link text="Sem seta" showRightIcon={false} /> Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
href | string | — | Se presente, vira <a>. Sem href = <span>. |
text | string | — | Conteúdo textual. Pode usar <slot> em vez. |
size | 'xs' | 'sm' | 'lg' | 'sm' | Escala de fonte e ícone. |
leftIcon | string | — | Material Symbol antes do texto. |
rightIcon | string | 'arrow_forward' | Material Symbol depois do texto. |
showRightIcon | boolean | true | Esconde o ícone direito. |
isNegative | boolean | false | Cores para fundos escuros. |
disabled | boolean | false | Bloqueia clique, cor cinza. |
ariaLabel | string | — | Use quando o texto não descrever ação. |
class | string | — | Classes adicionais. |