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.

CPU97

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

export default function StatExample() {
  return <Stat label="CPU" value="97" />;
}

Props

Prop	Attribute	Values	Default
`value`	None	string	None
`label`	None	string	None
`orientation`	`data-dn-orientation`	`horizontal`, `vertical`	`horizontal`
`unit`	None	string	None
`emphasis`	`data-dn-emphasis`	`primary`, `secondary`	`primary`
`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. Use orientation="vertical" to stack label above the value group while keeping value and unit on one line.

Orientation

Horizontal42Vertical42

import { Stat } from "density-base-ui";
export default function StatOrientationExample() {
  return (
    <div style={{ display: "flex", gap: "2rem" }}>
      <Stat label="Horizontal" orientation="horizontal" value="42" />
      <Stat label="Vertical" orientation="vertical" value="42" />
    </div>
  );
}

Unit

Latency18ms

import { Stat } from "density-base-ui";
export default function StatUnitExample() {
  return <Stat label="Latency" value="18" unit="ms" />;
}

Emphasis

Default42runsPrimary97%Secondary15ms

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

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

Size

2xs128xs128sm128md128lg128xl1282xl1283xl128

import { Stat } from "density-base-ui";
export default function StatSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <Stat label="2xs" value="128" size="2xs" />
      <Stat label="xs" value="128" size="xs" />
      <Stat label="sm" value="128" size="sm" />
      <Stat label="md" value="128" size="md" />
      <Stat label="lg" value="128" size="lg" />
      <Stat label="xl" value="128" size="xl" />
      <Stat label="2xl" value="128" size="2xl" />
      <Stat label="3xl" value="128" size="3xl" />
    </div>
  );
}