Stat

Stat is a utility component for metrics-first text. It renders label/value pairs in a consistent density-compatible order with number presentation applied to the value and label presentation applied to the label and unit.

Use label and unit to keep metric text in the correct DOM order: label first, value second, and unit last.

CPU 97 %Latency 15 ms2,438 assets

import { Stat, Panel } from "density-base-ui";

export default function StatExample() {
  return (
    <Panel>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
        <Stat label="CPU" value="97" unit="%" />
        <Stat label="Latency" value="15" unit="ms" density-size="sm" />
        <Stat value="2,438" unit="assets" density-size="xs" />
      </div>
    </Panel>
  );
}

Props

Prop	Attribute	Values	Default
`value`	None	string	None
`label`	None	string	None
`unit`	None	string	None
`density-emphasis`	`data-dn-emphasis`	`primary`, `secondary`	`primary`
`density-size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`
Other native span props	Mixed	`HTMLAttributes<HTMLSpanElement>`	None

value is required and always uses data-dn-presentation="number". label and unit use data-dn-presentation="label" when rendered.

Emphasis

Default 42 runsPrimary 97 %Secondary 15 ms

import { Stat, Panel } from "density-base-ui";

export default function StatEmphasisExample() {
  return (
    <Panel>
      <div style={{ display: "grid", gap: "0.75rem" }}>
        <Stat label="Default" value="42" unit="runs" />
        <Stat
          label="Primary"
          value="97"
          unit="%"
          density-emphasis="primary"
        />
        <Stat
          label="Secondary"
          value="15"
          unit="ms"
          density-emphasis="secondary"
        />
      </div>
    </Panel>
  );
}

Size

Value 128 msValue 128 msValue 128 msValue 128 msValue 128 msValue 128 msValue 128 msValue 128 ms

import { Stat, Panel } from "density-base-ui";

const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const;

export default function StatSizeExample() {
  return (
    <Panel>
      <div style={{ display: "grid", gap: "0.75rem" }}>
        {sizes.map((size) => (
          <Stat
            key={size}
            label="Value"
            value="128"
            unit="ms"
            density-size={size}
          />
        ))}
      </div>
    </Panel>
  );
}