Tag — Sinapse Design System

Aprovado

import { Badge } from '@/components/ui/badge'

export function BadgeExample() {
  return (
    <Badge variant="secondary">Aprovado</Badge>
  )
}

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

<template>
  <Badge variant="secondary">Aprovado</Badge>
</template>

<span class="itps-tag itps-tag--success itps-tag--sm">
  <span>Aprovado</span>
</span>

Instalação

Instale Badge da sua stack e rode o comando individual ITpS em seguida. O comando itps add tag é 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.

terminal · React/Next

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

terminal · Vue3/Nuxt4

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

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

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use Badge para rótulos curtos e read-only. Reserve ações clicáveis para Button, Link ou Chip.

Para HTML ou wrappers finos, use itps-tag com modificadores semânticos. Tag comunica estado ou classificação curta; não executa ação e não deve receber foco.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Raiz	`Badge`	`itps-tag`
Variante	`variant`	`itps-tag--default`, `itps-tag--success`, `itps-tag--alert`, `itps-tag--danger`, `itps-tag--disabled`
Tamanho	classe utilitária	`itps-tag--xs`, `itps-tag--sm`, `itps-tag--md`, `itps-tag--lg`
Ícone	ícone decorativo no conteúdo	`itps-tag__icon` com `aria-hidden="true"`

Variações copy-first

Use a variante semântica que descreve o estado da entidade. sm é o tamanho padrão; ajuste apenas quando a densidade da interface pedir.

Em análise Aprovado Atenção Crítico Arquivado

Extra small Medium Large

Pago Pendente Vencido

<div class="grid gap-4">
  <div class="flex flex-wrap items-center gap-2">
    <span class="itps-tag itps-tag--default itps-tag--sm">
      <span>Em análise</span>
    </span>
    <span class="itps-tag itps-tag--success itps-tag--sm">
      <span>Aprovado</span>
    </span>
    <span class="itps-tag itps-tag--alert itps-tag--sm">
      <span>Atenção</span>
    </span>
    <span class="itps-tag itps-tag--danger itps-tag--sm">
      <span>Crítico</span>
    </span>
    <span class="itps-tag itps-tag--disabled itps-tag--sm" aria-disabled="true">
      <span>Arquivado</span>
    </span>
  </div>

  <div class="flex flex-wrap items-center gap-2">
    <span class="itps-tag itps-tag--default itps-tag--xs">
      <span>Extra small</span>
    </span>
    <span class="itps-tag itps-tag--default itps-tag--md">
      <span>Medium</span>
    </span>
    <span class="itps-tag itps-tag--default itps-tag--lg">
      <span>Large</span>
    </span>
  </div>

  <div class="flex flex-wrap items-center gap-2">
    <span class="itps-tag itps-tag--success itps-tag--sm">
      <i class="itps-tag__icon ti ti-circle-check" aria-hidden="true"></i>
      <span>Pago</span>
    </span>
    <span class="itps-tag itps-tag--alert itps-tag--sm">
      <i class="itps-tag__icon ti ti-clock" aria-hidden="true"></i>
      <span>Pendente</span>
    </span>
    <span class="itps-tag itps-tag--danger itps-tag--sm">
      <i class="itps-tag__icon ti ti-alert-circle" aria-hidden="true"></i>
      <span>Vencido</span>
    </span>
  </div>
</div>

API copy-first

Classe/atributo	Uso
`itps-tag`	Wrapper read-only do rótulo.
`itps-tag--default`	Estado neutro ou informativo.
`itps-tag--success`	Estado positivo, concluído ou aprovado.
`itps-tag--alert`	Estado de atenção ou pendência.
`itps-tag--danger`	Estado crítico, erro ou risco alto.
`itps-tag--disabled`	Estado arquivado ou indisponível.
`itps-tag--xs`, `itps-tag--sm`, `itps-tag--md`, `itps-tag--lg`	Tamanhos por densidade.
`itps-tag__icon`	Ícone decorativo que reforça o texto.
`aria-disabled="true"`	Expõe estado indisponível quando necessário.
`aria-hidden="true"`	Esconde ícones decorativos de tecnologias assistivas.

Acessibilidade

Renderize como <span> para manter o comportamento read-only. Não use button, a, tabindex ou handlers de clique em Tag.

O texto deve ser suficiente para explicar o estado; ícone é decorativo. Use aria-disabled="true" apenas quando precisar comunicar estado arquivado ou indisponível para tecnologias assistivas.