# Link

CTA inline com indicador de seta para continuidade de leitura e navegação contextual.

> Documentação do Sinapse DS. Snippets shadcn usam os componentes do seu projeto (`@/components/ui/*`); snippets HTML usam as classes `itps-*` do CSS Sinapse (`/css/<versão>/`, veja `/comecar.md`). Componentes do site de documentação não fazem parte do DS.

- Categoria: Ações & Navegação
- Status: stable
- Relacionados: /componentes/button.md, /componentes/breadcrumb.md

## Em cada stack

- HTML e Astro: Classes `itps-*` do CSS Sinapse, com todas as variantes desta página.
- React e Vue: Composição com o Button Sinapse; as variantes `itps-*` desta página existem só no HTML.

**React/Next (shadcn/ui)**

```tsx
import { Button } from '@/components/ui/button'

export function LinkExample() {
  return (
    <Button asChild variant="link" className="h-auto p-0 font-semibold">
      <a href="/componentes">Ver componentes</a>
    </Button>
  )
}
```

**Vue 3/Nuxt 4 (shadcn-vue)**

```vue
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button as-child variant="link" class="h-auto p-0 font-semibold">
    <a href="/componentes">Ver componentes</a>
  </Button>
</template>
```

**HTML (copy-first)**

```html
<a href="/componentes" class="itps-link">
  <span>Ver componentes</span>
  <i class="ti ti-arrow-right" aria-hidden="true"></i>
</a>
```

## Instalação

O comando instala o Button Sinapse com o tema Sinapse. Configure o registry uma vez por projeto em [Comece por aqui](/comecar).

**terminal · React/Next**

```sh
pnpm dlx shadcn@latest add @sinapse/link
```

**terminal · Vue 3/Nuxt 4**

```sh
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/link.json
```

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

## Uso

Use Link para CTAs inline e continuidade de leitura, como "ver detalhes", "saiba mais" ou "ver componentes". Ele não substitui todo link: breadcrumb, footer e texto corrido podem usar `<a>` simples quando não precisam do tratamento visual de CTA.

Em React/Next com shadcn/ui e Vue 3/Nuxt 4 com shadcn-vue, use `Button variant="link"` com `asChild`/`as-child` para manter o destino como `<a>`. Para HTML ou wrappers finos, use `itps-link` diretamente no elemento `<a>`.

## Exemplos

### Estrutura

| Peça | React/Next e Vue 3/Nuxt 4 | HTML |
|------|--------|------------|
| Ação inline | `Button variant="link"` | `itps-link` |
| Destino real | `asChild` / `as-child` + `<a>` | `<a href>` |
| Tamanho | utilitários de texto | `itps-link--xs`, `itps-link--sm`, `itps-link--lg` |
| Estado indisponível | `aria-disabled` + estado local | `is-disabled` ou `aria-disabled="true"` |
| Ícone | composição visual | `<i class="ti ...">` |

### Tamanhos, estados e ícones

Use tamanhos menores em listas densas e `lg` em chamadas de destaque. Em estado indisponível, remova `href` e mantenha `aria-disabled="true"`. Ícones nos exemplos são decorativos e devem ficar com `aria-hidden="true"`.

**HTML (copy-first)**

```html
<div class="flex flex-col items-start gap-4">
  <a href="/comecar" class="itps-link itps-link--xs">
    <span>Saiba mais</span>
    <i class="ti ti-arrow-right" aria-hidden="true"></i>
  </a>

  <a href="/fundamentos" class="itps-link itps-link--sm">
    <span>Ver detalhes</span>
    <i class="ti ti-arrow-right" aria-hidden="true"></i>
  </a>

  <a href="/estilos" class="itps-link itps-link--lg">
    <span>Continuar leitura</span>
    <i class="ti ti-arrow-right" aria-hidden="true"></i>
  </a>

  <span class="itps-link is-disabled" aria-disabled="true">
    <span>Indisponível</span>
    <i class="ti ti-arrow-right" aria-hidden="true"></i>
  </span>

  <a href="/brand/itps-horizontal-default.svg" class="itps-link" download>
    <i class="ti ti-download" aria-hidden="true"></i>
    <span>Baixar arquivo</span>
  </a>

  <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="itps-link">
    <span>Abrir em nova aba</span>
    <i class="ti ti-external-link" aria-hidden="true"></i>
  </a>
</div>
```

## API copy-first

| Classe/atributo | Uso |
|-----------------|-----|
| `itps-link` | CTA inline com texto, foco visível e indicador opcional. |
| `itps-link itps-link--xs` | Link compacto para metadados ou listas densas. |
| `itps-link itps-link--sm` | Tamanho padrão para CTAs inline. |
| `itps-link itps-link--lg` | CTA maior para seções de destaque. |
| `is-disabled` | Estado visual indisponível. Use sem `href`. |
| `aria-disabled="true"` | Comunica que o link está indisponível quando renderizado sem `href`. |
| `target="_blank" rel="noopener noreferrer"` | Use para destinos externos abertos em nova aba. |
| `aria-hidden="true"` | Use em ícones decorativos quando o texto já descreve o destino. |

## Acessibilidade

Use `<a href>` quando houver navegação real. Se o link estiver indisponível, renderize sem `href`, adicione `aria-disabled="true"` e evite handlers de clique. O texto precisa descrever o destino; use `aria-label` apenas quando houver ambiguidade real. Ícones decorativos devem manter `aria-hidden="true"`.