Button — Sinapse Design System

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

export function ButtonExample() {
  return (
    <div className="flex flex-col items-start gap-3">
      <Button variant="itps">Salvar</Button>
      <Button variant="itpsSecondary">Editar</Button>
      <Button variant="outline">Revisar</Button>
      <Button variant="ghost">Cancelar</Button>
    </div>
  )
}

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

<template>
  <div class="flex flex-col items-start gap-3">
    <Button variant="itps">Salvar</Button>
    <Button variant="itpsSecondary">Editar</Button>
    <Button variant="outline">Revisar</Button>
    <Button variant="ghost">Cancelar</Button>
  </div>
</template>

<button type="button" class="itps-btn itps-btn--primary">Salvar</button>

<button type="button" class="itps-btn itps-btn--secondary">Editar</button>

<button type="button" class="itps-btn itps-btn--outline">Revisar</button>

<button type="button" class="itps-btn itps-btn--ghost">Cancelar</button>

Instalação

Crie o Button pela CLI da sua stack e aplique o adapter ITpS em seguida. A CLI preserva as variants originais do shadcn e adiciona itps e itpsSecondary.

terminal · React/Next

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

terminal · Vue3/Nuxt4

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

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Use Button para ações que executam uma operação no contexto atual, como salvar, editar, revisar ou cancelar. Para navegação entre páginas, use Link; a página Link cobre anchors, CTAs inline e composição asChild/as-child.

Em React/Next e Vue3/Nuxt4, use variant="itps" para a ação principal e variant="itpsSecondary" para a ação de apoio. Para HTML ou wrappers finos, aplique itps-btn com o modificador visual correspondente.

Exemplos

Variantes

Uso	React/Next e Vue3/Nuxt4	HTML
Ação principal	`variant="itps"`	`itps-btn itps-btn--primary`
Ação de apoio	`variant="itpsSecondary"`	`itps-btn itps-btn--secondary`
Ação contornada	`variant="outline"`	`itps-btn itps-btn--outline`
Ação discreta	`variant="ghost"`	`itps-btn itps-btn--ghost`

Tamanhos

No Button gerado pelo shadcn, mantenha os tamanhos da stack. Nas classes copy-first, use itps-btn--sm, sem modificador para o padrão, ou itps-btn--lg.

Estados

Use disabled para bloquear interação. Para carregamento, combine disabled e aria-busy="true"; quando houver spinner, mantenha o ícone decorativo com aria-hidden="true".

Ícones

Em React/Next use lucide-react; em Vue3/Nuxt4 use lucide-vue-next. Em HTML, use ícones Tabler dentro do botão apenas como apoio visual, sempre com aria-hidden="true" quando o texto já descreve a ação.

API copy-first

Classe/atributo	Uso
`itps-btn`	Classe base. Use sempre em botões copy-first.
`itps-btn itps-btn--primary`	Ação principal da tela ou do fluxo.
`itps-btn itps-btn--secondary`	Ação de apoio com menor peso visual.
`itps-btn itps-btn--outline`	Ação contornada ou alternativa.
`itps-btn itps-btn--ghost`	Ação discreta, geralmente secundária ao conteúdo.
`itps-btn--sm`	Botão compacto. Combine com `itps-btn` e uma variant.
`itps-btn--lg`	Botão de destaque. Combine com `itps-btn` e uma variant.
`disabled`	Bloqueia interação em `<button>`.
`aria-disabled="true"`	Indica estado indisponível quando o elemento não pode usar `disabled`.
`aria-busy="true"`	Comunica carregamento; use junto de `disabled` quando a ação está em andamento.
`type="button"`	Evita submit acidental em formulários. Troque para `submit` apenas quando o botão envia o formulário.
`aria-label`	Use somente em botões sem texto visível ou quando o texto não descreve a ação.

Acessibilidade

Prefira texto visível que descreva a ação.
Em botões só com ícone, use aria-label.
Para loading, mantenha o botão desabilitado e anuncie o estado com aria-busy="true".