Comparison Indicator

Compares current and reference values.

html

<div class="comparison-indicator-demo comparison-indicator-demo--up" style="--accent:#A8E6C1;">
  <span class="comparison-indicator-demo__current">128</span>
  <span class="comparison-indicator-demo__delta">
    <svg class="comparison-indicator-demo__icon comparison-indicator-demo__icon--up" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2 14 10 10 10 10 14 6 14 6 10 2 10Z" /></svg>
    <svg class="comparison-indicator-demo__icon comparison-indicator-demo__icon--down" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 14 2 6 6 6 6 2 10 2 10 6 14 6Z" /></svg>
    <svg class="comparison-indicator-demo__icon comparison-indicator-demo__icon--flat" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="7" width="12" height="2" /></svg>
    <span class="comparison-indicator-demo__word comparison-indicator-demo__word--up">Up</span>
    <span class="comparison-indicator-demo__word comparison-indicator-demo__word--down">Down</span>
    <span class="comparison-indicator-demo__word comparison-indicator-demo__word--flat">Flat</span>
  </span>
  <span class="comparison-indicator-demo__previous">from 112 previously</span>
</div>
<style>
.comparison-indicator-demo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px 16px; border: 1.5px solid #24143022; border-radius: 12px; box-sizing: border-box; }
.comparison-indicator-demo__current { font-size: 22px; font-weight: 700; }
.comparison-indicator-demo__delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 30%, #FAF7F2); font-weight: 700; font-size: 12px; color: #241430; }
.comparison-indicator-demo__icon { width: 12px; height: 12px; fill: var(--accent); display: none; }
.comparison-indicator-demo__word { display: none; }
.comparison-indicator-demo--up .comparison-indicator-demo__icon--up,
.comparison-indicator-demo--up .comparison-indicator-demo__word--up,
.comparison-indicator-demo--down .comparison-indicator-demo__icon--down,
.comparison-indicator-demo--down .comparison-indicator-demo__word--down,
.comparison-indicator-demo--flat .comparison-indicator-demo__icon--flat,
.comparison-indicator-demo--flat .comparison-indicator-demo__word--flat { display: inline-flex; }
.comparison-indicator-demo__previous { font-size: 12px; color: #24143099; width: 100%; }
</style>

tailwind

<div class="comparison-indicator-tw comparison-indicator-tw--up inline-flex flex-wrap items-baseline gap-2 font-sans text-sm text-[#241430] bg-[#FAF7F2] px-4 py-3 border-[1.5px] border-[#24143022] rounded-xl box-border" style="--accent:#A8E6C1;">
  <span class="text-[22px] font-bold">128</span>
  <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-bold text-xs" style="background:color-mix(in srgb, #A8E6C1 30%, #FAF7F2);">
    <svg class="comparison-indicator-tw__icon comparison-indicator-tw__icon--up w-3 h-3" style="fill:#A8E6C1;" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2 14 10 10 10 10 14 6 14 6 10 2 10Z" /></svg>
    <svg class="comparison-indicator-tw__icon comparison-indicator-tw__icon--down w-3 h-3" style="fill:#A8E6C1;" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 14 2 6 6 6 6 2 10 2 10 6 14 6Z" /></svg>
    <svg class="comparison-indicator-tw__icon comparison-indicator-tw__icon--flat w-3 h-3" style="fill:#A8E6C1;" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="7" width="12" height="2" /></svg>
    <span class="comparison-indicator-tw__word comparison-indicator-tw__word--up">Up</span>
    <span class="comparison-indicator-tw__word comparison-indicator-tw__word--down">Down</span>
    <span class="comparison-indicator-tw__word comparison-indicator-tw__word--flat">Flat</span>
  </span>
  <span class="text-xs text-[#241430]/60 w-full">from 112 previously</span>
</div>
<style>
.comparison-indicator-tw__icon, .comparison-indicator-tw__word { display: none; }
.comparison-indicator-tw--up .comparison-indicator-tw__icon--up,
.comparison-indicator-tw--up .comparison-indicator-tw__word--up,
.comparison-indicator-tw--down .comparison-indicator-tw__icon--down,
.comparison-indicator-tw--down .comparison-indicator-tw__word--down,
.comparison-indicator-tw--flat .comparison-indicator-tw__icon--flat,
.comparison-indicator-tw--flat .comparison-indicator-tw__word--flat { display: inline-flex; }
</style>

react

export function ComparisonIndicator({
  currentValue = "128",
  previousValue = "112",
  direction = "up",
  accent = "#A8E6C1",
}) {
  const icons = {
    up: { path: "M8 2 14 10 10 10 10 14 6 14 6 10 2 10Z", word: "Up" },
    down: { path: "M8 14 2 6 6 6 6 2 10 2 10 6 14 6Z", word: "Down" },
    flat: { path: null, word: "Flat" },
  }[direction];
  return (
    <div style={{ display: "inline-flex", flexWrap: "wrap", alignItems: "baseline", gap: 8, font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "12px 16px", border: "1.5px solid #24143022", borderRadius: 12, boxSizing: "border-box" }}>
      <span style={{ fontSize: 22, fontWeight: 700 }}>{currentValue}</span>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "3px 8px", borderRadius: 999, background: "color-mix(in srgb, " + accent + " 30%, #FAF7F2)", fontWeight: 700, fontSize: 12 }}>
        <svg width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" style={{ fill: accent }}>
          {icons.path ? <path d={icons.path} /> : <rect x="2" y="7" width="12" height="2" />}
        </svg>
        {icons.word}
      </span>
      <span style={{ fontSize: 12, color: "#24143099", width: "100%" }}>from {previousValue} previously</span>
    </div>
  );
}