Link — Sinapse Design System

Ver componentes

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

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

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

Instalação

Em React/Next e Vue3/Nuxt4, o snippet usa o Button da stack como primitivo (variant="link" com asChild/as-child). Instale o Button se ele ainda não existir e rode o comando individual do Link em seguida.

terminal · React/Next

pnpm dlx shadcn@latest add button
pnpm dlx github:ITPS/sinapse-ui-cli add link

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add button
pnpm dlx github:ITPS/sinapse-ui-cli add link

O comando individual itps add link é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets 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 todos os anchors: 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 Vue3/Nuxt4 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 anchor.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	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".

Saiba mais Ver detalhes Continuar leitura Indisponivel Baixar arquivo Abrir em nova aba

<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>Indisponivel</span>
    <i class="ti ti-arrow-right" aria-hidden="true"></i>
  </span>

  <a href="/assets" class="itps-link">
    <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".