Componentes
Tag
Badge read-only de status. 4 sizes × 5 statuses semânticos. Diferente de Chip — Tag não é interativo.
Statuses
Mesma paleta de Banner/Callout — default azul, success verde, alert amarelo, danger coral, disabled cinza.
Em análise Aprovado Atenção Crítico Arquivado
<Tag status="default" text="Em análise" />
<Tag status="success" text="Aprovado" />
<Tag status="alert" text="Atenção" />
<Tag status="danger" text="Crítico" />
<Tag status="disabled" text="Arquivado" />
<Tag status="default" text="Em análise" />
<Tag status="success" text="Aprovado" />
<Tag status="alert" text="Atenção" />
<Tag status="danger" text="Crítico" />
<Tag status="disabled" text="Arquivado" /><template>
<span class="itps-chip">Em análise</span>
<span class="itps-chip itps-chip--success">Aprovado</span>
<span class="itps-chip itps-chip--warning">Atenção</span>
<span class="itps-chip itps-chip--danger">Crítico</span>
<span class="itps-chip opacity-60">Arquivado</span>
</template>
<template>
<span class="itps-chip">Em análise</span>
<span class="itps-chip itps-chip--success">Aprovado</span>
<span class="itps-chip itps-chip--warning">Atenção</span>
<span class="itps-chip itps-chip--danger">Crítico</span>
<span class="itps-chip opacity-60">Arquivado</span>
</template><>
<span className="itps-chip">Em análise</span>
<span className="itps-chip itps-chip--success">Aprovado</span>
<span className="itps-chip itps-chip--warning">Atenção</span>
<span className="itps-chip itps-chip--danger">Crítico</span>
<span className="itps-chip opacity-60">Arquivado</span>
</>
<>
<span className="itps-chip">Em análise</span>
<span className="itps-chip itps-chip--success">Aprovado</span>
<span className="itps-chip itps-chip--warning">Atenção</span>
<span className="itps-chip itps-chip--danger">Crítico</span>
<span className="itps-chip opacity-60">Arquivado</span>
</><span class="itps-chip">Em análise</span>
<span class="itps-chip itps-chip--success">Aprovado</span>
<span class="itps-chip itps-chip--warning">Atenção</span>
<span class="itps-chip itps-chip--danger">Crítico</span>
<span class="itps-chip opacity-60">Arquivado</span>
<span class="itps-chip">Em análise</span>
<span class="itps-chip itps-chip--success">Aprovado</span>
<span class="itps-chip itps-chip--warning">Atenção</span>
<span class="itps-chip itps-chip--danger">Crítico</span>
<span class="itps-chip opacity-60">Arquivado</span>Sizes
Quatro escalas: xs (h-24), sm (h-32, default), md (h-40), lg (h-48).
Extra small Small Medium Large
<Tag size="xs" text="Extra small" />
<Tag size="sm" text="Small" />
<Tag size="md" text="Medium" />
<Tag size="lg" text="Large" />
<Tag size="xs" text="Extra small" />
<Tag size="sm" text="Small" />
<Tag size="md" text="Medium" />
<Tag size="lg" text="Large" />Com ícone
leftIcon aceita Material Symbol. Cor do ícone segue a paleta do status.
Pago Pendente Vencido
<Tag status="success" text="Pago" leftIcon="check_circle" />
<Tag status="alert" text="Pendente" leftIcon="schedule" />
<Tag status="danger" text="Vencido" leftIcon="error" />
<Tag status="success" text="Pago" leftIcon="check_circle" />
<Tag status="alert" text="Pendente" leftIcon="schedule" />
<Tag status="danger" text="Vencido" leftIcon="error" />Tag vs Chip
| Tag | Chip |
|---|---|
| Read-only indicador de status | Interativo — filter, dismiss, toggle |
Renderizado como <span> | Renderizado como <button> ou <a> |
| Mostra estado da entidade | Permite ação do usuário |
Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
status | 'default' | 'success' | 'alert' | 'danger' | 'disabled' | 'default' | Variante semântica. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Densidade. |
text | string | obrigatório | Texto da tag. |
leftIcon | string | — | Material Symbol antes do texto. |
class | string | — | Classes adicionais. |