Link — Sinapse Design System

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" />

<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="#" 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 />

Sobre fundo escuro

Use isNegative em superfícies dark. Texto e underline em branco.

Saiba mais

<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} />

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.