Skip to Content
ComponentsMoleculesMetric Card

Metric Card

Molecule

Metric Card resume uma métrica para leitura rápida. Delta é movimento de métrica; não é risco operacional.

Use Metric Card em dashboards, painéis de operação e resumos de caso. O card deve explicar o que o número mede, a janela de comparação e se a variação exige investigação. Para risco operacional, use a taxonomia stable / monitor / attention / high / critical, não o tom do delta.

Exemplos copiáveis

React

import * as React from "react"
 
type DeltaTone = "positive" | "neutral" | "warning" | "negative"
 
type PulsoMetricCardProps = {
  label: string
  value: string | number
  delta?: string
  deltaTone?: DeltaTone
  description?: string
  comparisonLabel?: string
}
 
const deltaClass: Record<DeltaTone, string> = {
  positive: "bg-[var(--delta-positive-bg)] text-[var(--delta-positive)]",
  neutral: "bg-[var(--muted)] text-[var(--fg-muted)]",
  warning: "bg-[var(--delta-warn-bg)] text-[var(--delta-warn)]",
  negative: "bg-[var(--delta-negative-bg)] text-[var(--delta-negative)]",
}
 
export function PulsoMetricCard({
  label,
  value,
  delta,
  deltaTone = "neutral",
  description,
  comparisonLabel,
}: PulsoMetricCardProps) {
  return (
    <article className="rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--card)] p-4">
      <div className="flex items-start justify-between gap-3">
        <p className="font-mono text-[10.5px] uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]">
          {label}
        </p>
        {delta ? (
          <span className={["rounded-[var(--radius-xs)] px-2 py-0.5 font-mono text-[11px]", deltaClass[deltaTone]].join(" ")}>
            {delta}
          </span>
        ) : null}
      </div>
 
      <strong className="mt-3 block font-mono text-4xl font-semibold tabular-nums text-[var(--fg-strong)]">
        {value}
      </strong>
 
      {description ? <p className="mt-2 text-sm text-[var(--fg-muted)]">{description}</p> : null}
      {comparisonLabel ? (
        <p className="mt-3 font-mono text-[10.5px] uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]">
          {comparisonLabel}
        </p>
      ) : null}
    </article>
  )
}
<PulsoMetricCard
  label="Menções 24h"
  value="1.247"
  delta="+12%"
  deltaTone="warning"
  description="Volume acima da média das últimas 4 semanas."
  comparisonLabel="Comparado com janela anterior"
/>

Regras

  • Nomeie a janela da métrica quando houver comparação.
  • Use numerais tabulares para valores principais.
  • Delta mostra variação, não severidade.
  • Se o número aciona decisão crítica, exponha a consequência em texto ou estado separado.
Last updated on
Input GroupPage Header