Stat Strip · Smallest

Default

A row of KPIs above charts. delta is percent change: green when the metric improved, red when it got worse.

Total calls1,450+10%

Connected1,122+4%

Avg. duration3m 12s-6%

Cost$184.20+3%

import { StatStrip } from "@smallest-inc/ui";

export default function StatStripDefault() {
  return (
    <StatStrip
      items={[
        { id: "calls", label: "Total calls", value: "1,450", delta: 10 },
        { id: "connected", label: "Connected", value: "1,122", delta: 4 },
        { id: "duration", label: "Avg. duration", value: "3m 12s", delta: -6 },
        { id: "cost", label: "Cost", value: "$184.20", delta: 3 },
      ]}
    />
  );
}

Lower is better

Set improvementDirection to lower for metrics where down is good, such as handle time or failures.

Avg. handle time2m 40s-8%

Response latency690 ms-15%

Failed calls38+12%

import { StatStrip } from "@smallest-inc/ui";

/** Handle time and failures should go down, so a negative delta shows green. */
export default function StatStripLowerIsBetter() {
  return (
    <StatStrip
      items={[
        { id: "handle", label: "Avg. handle time", value: "2m 40s", delta: -8, improvementDirection: "lower" },
        { id: "latency", label: "Response latency", value: "690 ms", delta: -15, improvementDirection: "lower" },
        { id: "failed", label: "Failed calls", value: "38", delta: 12, improvementDirection: "lower" },
      ]}
    />
  );
}

Badges and suffixes

suffix continues the value inline, like “of 7”. badge adds a neutral tag, like “Today”.

Active agents5of 7

Calls312Today

Resolved86%+2%

Loading

Skeleton cells hold the strip's height while data loads.

Best practices

When to use

Use for a row of two to five headline KPIs above charts, where each cell is read on its own.
Use Spotlight Chart when choosing a KPI should change the chart. Stat Strip cells are not interactive.

Behavior

Cells share the row equally (minimum 140px) and scroll horizontally when they run out of room.
delta is percent change: green when the metric improved, red when it got worse. Set improvementDirection="lower" where down is good. Omit it, or pass 0, to hide the pill.
loading with skeletonCount keeps the strip's height; match skeletonCount to the number of cells that will load.

Content

Keep labels short and values pre-formatted ("3m 12s", "$184.20").
Use suffix for inline context ("of 7") and badge for a neutral scope tag ("Today"). Do not use both on one cell.

Accessibility

The delta sign is in the text, so improvement does not depend on color alone.