MetaLabel
Interactive
See MetaLabel in Storybook for every variant, with live controls.
The uppercase mono caption that labels a value — STATUS, LAST RUN, DURATION.
import { MetaLabel, DataValue } from "@kairosis/eidos";
<MetaLabel>Last run</MetaLabel>
<DataValue>2026-07-10 14:32</DataValue>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Required |
Also accepts every <span> attribute.
Guidelines
- Uppercasing is done in CSS, so write it in sentence case — "Last run", not "LAST RUN". Copy stays readable in the source and in search.
- This is the one place Eidos uses uppercase. Everything else is sentence case.
- 11px mono with +0.06em tracking; the tracking is what keeps small uppercase legible.
- It captions data. Pair it with
DataValue, not with body copy.