Meta
An inline row of facts, separated by a gap instead of a glyph.
import { Meta } from "@arcadia/ui"A row of facts that belong together (how long something took and when, a model's window and effort, a machine's platform). The space between them is --meta-gap. There is no dot, bar or bullet.
Short of room, the later facts shrink first, each fading out at its end inside its own box. Text never runs into the gap or under the next fact, so a narrow menu row stays readable.
With fit="drop" each fact shows whole or not at all, the later ones going first: a picker row in a narrow window reads "200K context" rather than two cut facts, and with less room, no fact rather than a cut one.
Examples
rootStyle takes layout and this knob: the gap, as a spacing token.
--meta-gap- Ref<Space>Default var(--space-2)
- Space between items. Default 8px (
--space-2).
Each fact is its own element. A comma between them is clipped to a pixel, so the eye sees only the gap while a screen reader, and a copy of the line, still gets the list: "Worked for 6s, 2h ago".
Do not put a separator character in the facts themselves. A title, a tooltip or a notification that cannot be a row should be a sentence or a comma list instead.
Meta
items- readonly ReactNode[]
- The facts, in order. Each one is rendered as its own span. Pass elements when a fact needs its own structure (an icon, a tooltip). Omit to pass them as children instead.
fit- "shrink" | "drop"Default "shrink"
- Short of room.
shrink: every fact gives some up, the later ones first, each fading at its end in its own box.drop: each fact shows whole or not at all, the later ones going first, so a narrow picker row never cuts one. rootStyle- RootStyle<MetaKnobs>
- Typed StyleX override: layout and the
--meta-*knobs. children- ReactNode
- The facts, when
itemsis omitted.
Rest props go to <span> props.