Eyebrow

The small uppercase mono caption above the thing it names — a nav group, a metric, a step. One drawing for an idiom that used to be hand-drawn ten ways.

When to use it

A short name of what the thing is, set above a value or a block: “Warehouse” above a path, “In production” above a number, “Step 2” above a card title.
A group caption in a menu or a side index — text read as orientation, not as content.
A kicker above a paragraph in a guide or on a public page (size="md").

When not to use it

The text names a STATE (“in production”, “done”) — that is IngotBadge: it has a border, a tone and contrast rules a bare caption does not.
The text is a heading that belongs in the page outline — that is IngotSection. An eyebrow deliberately carries no heading role.
A form field's label. That is a label and belongs to IngotField, so a screen reader ties it to the input.

Properties

children: ReactNode — The caption, already translated. Uppercase is done by CSS.
as: "p" | "span" | "div" — The element. Defaults to p; span inline, div for a block holding other content.
size: "sm" | "md" — sm (10.5 px) inside components, md (the text-eyebrow token, 11 px) above prose.
tone: "neutral" | "muted" | "accent" | "ok" | "inherit" — Colour from tokens. inherit leaves colour to the parent — a link that changes colour on hover.
className: string — Layout only (margins, flex). Colour and type come from size and tone.
testId: string — An anchor for tests.