Skip to Content
ComponentsMoleculesDelta Chip

Delta Chip

Molecule

Delta Chip mostra movimento de métrica. Ele não representa risco operacional.

Use Delta Chip para variações período a período, crescimento, queda ou estabilidade de uma métrica. Risco operacional continua usando a escala stable / monitor / attention / high / critical e tokens --risk-*.

Exemplos copiáveis

React

import * as React from "react"
 
type DeltaTone = "up" | "down" | "flat"
 
type PulsoDeltaChipProps = {
  value: number
  suffix?: string
  label?: string
  tone?: DeltaTone
}
 
function getDeltaTone(value: number, tone?: DeltaTone): DeltaTone {
  if (tone) return tone
  if (value > 0) return "up"
  if (value < 0) return "down"
  return "flat"
}
 
export function PulsoDeltaChip({
  value,
  suffix = "%",
  label,
  tone,
}: PulsoDeltaChipProps) {
  const resolvedTone = getDeltaTone(value, tone)
  const sign = value > 0 ? "+" : ""
  const icon = resolvedTone === "up" ? "↗" : resolvedTone === "down" ? "↘" : "→"
 
  return (
    <span
      data-delta={resolvedTone}
      aria-label={label ?? `Variação ${sign}${value}${suffix}`}
      className={[
        "inline-flex items-center gap-1 rounded-[var(--radius-sm)] border px-2 py-1 font-mono text-xs font-semibold tabular-nums",
        resolvedTone === "up"
          ? "border-[var(--delta-positive-border)] bg-[var(--delta-positive-bg)] text-[var(--delta-positive-text)]"
          : "",
        resolvedTone === "down"
          ? "border-[var(--delta-negative-border)] bg-[var(--delta-negative-bg)] text-[var(--delta-negative-text)]"
          : "",
        resolvedTone === "flat"
          ? "border-[var(--border)] bg-[var(--muted)] text-[var(--fg-muted)]"
          : "",
      ].join(" ")}
    >
      <span aria-hidden="true">{icon}</span>
      {sign}{value}{suffix}
    </span>
  )
}
<div className="flex items-center gap-2">
  <strong className="font-mono text-2xl tabular-nums">1.247</strong>
  <PulsoDeltaChip value={12} label="Menções subiram 12 por cento nas últimas 24 horas" />
</div>

Quando usar

  • Variações de métricas em cards e tabelas.
  • Comparativos período a período.
  • Tendência de volume, score, velocidade ou cobertura.
  • Complemento de gráficos pequenos, como sparkline.

Quando não usar

  • Para risco operacional.
  • Para status de crise.
  • Para sucesso/erro de ação.
  • Para prioridade ou severidade de incidente.

Regras

  1. Delta é movimento de métrica, não julgamento operacional.
  2. Sempre deixe claro o período ou baseline em contexto próximo.
  3. Use números tabulares.
  4. Sinal e ícone não substituem label acessível.
  5. Queda pode ser boa ou ruim dependendo da métrica; não assuma sem contexto.
Last updated on
Button GroupEmpty State