---
title: Stat
description: A row of labeled numbers that summarizes what a panel shows.
---

```tsx
import { Stat } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StatBasic() {
  return (
    <Preview>
      <Stat.Group>
        <Stat.Root>
          <Stat.Label>Label 1</Stat.Label>
          <Stat.Value>120</Stat.Value>
        </Stat.Root>
        <Stat.Root>
          <Stat.Label>Label 2</Stat.Label>
          <Stat.Value>48</Stat.Value>
        </Stat.Root>
      </Stat.Group>
    </Preview>
  );
}
```

- A stat is a label followed by its value. Put the stats of one panel in a `Group`; it wraps to the next line when space runs out.
- Keep `Label` short and `Value` exact.
- Use stats for a compact summary inside a panel, such as the details of a selected span. On an entity page, metrics go in its sidebar as [Property](/deft/components/property) rows. Use [Metric](/deft/components/metric) for tiles that pick what a chart shows.

## Deltas

```tsx
import { Stat } from "@openperf/deft";

import { Preview } from "../../src/Preview";

const TONES = ["neutral", "success", "warning", "danger"] as const;

export default function StatDeltas() {
  return (
    <Preview>
      <Stat.Group>
        {TONES.map((tone) => (
          <Stat.Root key={tone}>
            <Stat.Label className="capitalize">{tone}</Stat.Label>
            <Stat.Value>
              120
              <Stat.Delta tone={tone}>+12</Stat.Delta>
            </Stat.Value>
          </Stat.Root>
        ))}
      </Stat.Group>
    </Preview>
  );
}
```

`Delta` compares the value with the previous period and sits inside `Value`. Its `tone` follows the health of the metric, not the direction of the change: `warning` when it got worse, `danger` when it is past its limit, `success` when it got better, `neutral` otherwise. [Metric](/deft/components/metric) tabs and cards show their change with the same `Delta`.

## Notes

```tsx
import { Stat } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StatNotes() {
  return (
    <Preview>
      <Stat.Group>
        <Stat.Root>
          <Stat.Label>Label</Stat.Label>
          <Stat.Value>
            120
            <Stat.Note>Note</Stat.Note>
          </Stat.Value>
        </Stat.Root>
      </Stat.Group>
    </Preview>
  );
}
```

Put context such as a sample size or a secondary percentile in a `Note` inside the value.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `tone?` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | On Delta. |

Parts: `Root`, `Delta`, `Group`, `Label`, `Note`, `Value`. `Group` renders a `dl`, `Label` a `dt` and `Value` a `dd`; other props go to the native element.