Trend Indicator

Shows direction of change.

html

<div class="trend-indicator trend-indicator--up" style="--accent:#A8E6C1;--size:20px;">
    <span class="trend-indicator__variant trend-indicator__variant--up">
      <svg class="trend-indicator__icon" viewBox="0 0 22 22" aria-hidden="true">
        <path d="M4,17 L11,6 L18,17 M11,6 L11,20"></path>
      </svg>
      <span class="trend-indicator__word">Increase</span>
    </span>
    <span class="trend-indicator__variant trend-indicator__variant--down">
      <svg class="trend-indicator__icon" viewBox="0 0 22 22" aria-hidden="true">
        <path d="M4,7 L11,18 L18,7 M11,4 L11,18"></path>
      </svg>
      <span class="trend-indicator__word">Decrease</span>
    </span>
    <span class="trend-indicator__variant trend-indicator__variant--flat">
      <svg class="trend-indicator__icon" viewBox="0 0 22 22" aria-hidden="true">
        <path d="M4,12 L18,12 M13,7 L18,12 L13,17"></path>
      </svg>
      <span class="trend-indicator__word">No change</span>
    </span>
  <span class="trend-indicator__value">+4.2%</span>
</div>
<style>
.trend-indicator { display: inline-flex; align-items: center; gap: 8px; font: 600 calc(var(--size) * 0.7px) system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 8px 12px; border-radius: 8px; box-sizing: border-box; }
.trend-indicator__variant { display: none; align-items: center; gap: 6px; }
.trend-indicator--up .trend-indicator__variant--up { display: inline-flex; }
.trend-indicator--down .trend-indicator__variant--down { display: inline-flex; }
.trend-indicator--flat .trend-indicator__variant--flat { display: inline-flex; }
.trend-indicator__icon { width: var(--size); height: var(--size); flex: none; }
.trend-indicator__icon path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.trend-indicator__word { color: #241430; }
.trend-indicator__value { font-weight: 700; color: var(--accent); }
</style>

tailwind

<div class="trend-indicator-tw trend-indicator-tw--up" style="--accent:#A8E6C1;--size:20px;">
    <span class="trend-indicator-tw__variant trend-indicator-tw__variant--up">
      <svg class="trend-indicator-tw__icon" viewBox="0 0 22 22" aria-hidden="true">
        <path d="M4,17 L11,6 L18,17 M11,6 L11,20"></path>
      </svg>
      <span class="trend-indicator-tw__word">Increase</span>
    </span>
    <span class="trend-indicator-tw__variant trend-indicator-tw__variant--down">
      <svg class="trend-indicator-tw__icon" viewBox="0 0 22 22" aria-hidden="true">
        <path d="M4,7 L11,18 L18,7 M11,4 L11,18"></path>
      </svg>
      <span class="trend-indicator-tw__word">Decrease</span>
    </span>
    <span class="trend-indicator-tw__variant trend-indicator-tw__variant--flat">
      <svg class="trend-indicator-tw__icon" viewBox="0 0 22 22" aria-hidden="true">
        <path d="M4,12 L18,12 M13,7 L18,12 L13,17"></path>
      </svg>
      <span class="trend-indicator-tw__word">No change</span>
    </span>
  <span class="trend-indicator-tw__value">+4.2%</span>
</div>
<style>
.trend-indicator-tw { display: inline-flex; align-items: center; gap: 8px; font: 600 calc(var(--size) * 0.7px) system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 8px 12px; border-radius: 8px; box-sizing: border-box; }
.trend-indicator-tw__variant { display: none; align-items: center; gap: 6px; }
.trend-indicator-tw--up .trend-indicator-tw__variant--up { display: inline-flex; }
.trend-indicator-tw--down .trend-indicator-tw__variant--down { display: inline-flex; }
.trend-indicator-tw--flat .trend-indicator-tw__variant--flat { display: inline-flex; }
.trend-indicator-tw__icon { width: var(--size); height: var(--size); flex: none; }
.trend-indicator-tw__icon path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.trend-indicator-tw__word { color: #241430; }
.trend-indicator-tw__value { font-weight: 700; color: var(--accent); }
</style>

react

export function TrendIndicator({
  direction = "up",
  value = "+4.2%",
  size = 20,
  accent = "#A8E6C1",
}) {
  const variants = {
    up: { path: "M4,17 L11,6 L18,17 M11,6 L11,20", word: "Increase" },
    down: { path: "M4,7 L11,18 L18,7 M11,4 L11,18", word: "Decrease" },
    flat: { path: "M4,12 L18,12 M13,7 L18,12 L13,17", word: "No change" },
  };
  const active = variants[direction] ?? variants.flat;
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 600, fontSize: size * 0.7,
      fontFamily: "system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "8px 12px", borderRadius: 8, boxSizing: "border-box" }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
        <svg viewBox="0 0 22 22" aria-hidden="true" style={{ width: size, height: size, flex: "none" }}>
          <path d={active.path} fill="none" stroke={accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span>{active.word}</span>
      </span>
      <span style={{ fontWeight: 700, color: accent }}>{value}</span>
    </div>
  );
}