TextRow

A label-left, value-right row with an optional quiet meta value, the basic building block of summary cards.

When to use

• Key–value summaries in cards and panels: run details, billing summaries, model settings.
• Values that are short text, numbers, or a small inline element such as a StatusPill.
• Not for tabular data with several columns: use RecordsTable or SortableDataTable. Not for editable settings: pair a label with a form control instead.

Usage

import { TextRow } from "@/components/iris/text-row/text-row";

h(
  "div",
  null,
  h(TextRow, { label: "Created in", value: "10.2 s", meta: "256 MB" }),
  h(TextRow, { label: "Status", value: h(StatusPill, { tone: "green" }, "Ready") }),
);

Props

Prop	Type	Default	Description
label	ReactNode	—	Required. Left-hand label in secondary ink.
value	ReactNode	—	Required. Right-aligned value, medium weight with tabular numbers.
meta	ReactNode	—	Quiet trailing text after the value (a delta, a unit, "of 10 GiB").
className	string	—	Extra classes on the row.

Notes

• The row has no dividers of its own; the container draws them (for example a top border on every row after the first).
• Minimum height 44px with 8px vertical padding, so rows align in a rhythm across cards.
• Plain markup with no list semantics; wrap a set in a dl or a labelled container if the relationship matters for assistive tech.
• Reads --ink, --ink-2, --ink-3.