Skip to Content
ComponentsAtomsBadge

Badge

Atom

Badge comunica uma classificação curta. Ele não é botão, não substitui texto explicativo e não carrega decisão sozinho.

Use Badge para status, risco, origem de IA ou metadados compactos. A semântica vem antes da cor: risco usa stable / monitor / attention / high / critical; delta continua sendo movimento de métrica.

Exemplos copiáveis

React

import * as React from "react"
 
type BadgeTone = "neutral" | "stable" | "monitor" | "attention" | "high" | "critical" | "ai"
 
type PulsoBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
  tone?: BadgeTone
}
 
const toneClass: Record<BadgeTone, string> = {
  neutral: "border-[var(--border)] bg-[var(--muted)] text-[var(--fg-secondary)]",
  stable: "border-[var(--risk-stable-border)] bg-[var(--risk-stable-bg)] text-[var(--risk-stable-text)]",
  monitor: "border-[var(--risk-monitor-border)] bg-[var(--risk-monitor-bg)] text-[var(--risk-monitor-text)]",
  attention: "border-[var(--risk-attention-border)] bg-[var(--risk-attention-bg)] text-[var(--risk-attention-text)]",
  high: "border-[var(--risk-high-border)] bg-[var(--risk-high-bg)] text-[var(--risk-high-text)]",
  critical: "border-[var(--risk-critical-border)] bg-[var(--risk-critical-bg)] text-[var(--risk-critical-text)]",
  ai: "border-[var(--border)] bg-[var(--primary-soft)] text-[var(--primary)]",
}
 
export function PulsoBadge({ tone = "neutral", className, children, ...props }: PulsoBadgeProps) {
  return (
    <span
      className={[
        "inline-flex items-center gap-1 rounded-[var(--radius-xs)] border px-2 py-0.5",
        "font-mono text-[10.5px] font-medium uppercase tracking-[var(--tracking-kicker)]",
        toneClass[tone],
        className,
      ].filter(Boolean).join(" ")}
      {...props}
    >
      {children}
    </span>
  )
}
<PulsoBadge tone="high">◆ high</PulsoBadge>
<PulsoBadge tone="ai">◐ Escrito com Cris</PulsoBadge>
<PulsoBadge>12 fontes</PulsoBadge>

Semânticas v3

UsoTokensExemplo
Status de fluxocomponente/padrão de statusEm execução
Risco operacional--risk-*◆ high
Delta de métrica--delta-*+18%
Origem de IAmarcador + trilha auditávelEscrito com Cris
Metadado neutro--muted, --border12 fontes

Regras

  1. Badge sempre precisa de label textual legível.
  2. Cor nunca é o único indicador.
  3. Badges de risco usam token --risk-*.
  4. Badges de métrica usam token --delta-*.
  5. Conteúdo da Cris exige origem explícita e trilha auditável.
  6. A taxonomia canônica de risco é stable / monitor / attention / high / critical.
Last updated on
AvatarBreadcrumb