Eyebrow

Malý mono popisek verzálkami nad věcí, kterou pojmenovává — skupina v menu, metrika, krok. Jeden zápis pro idiom, který se dřív kreslil deseti způsoby.

Kdy použít

Nad hodnotou nebo blokem stojí krátké jméno toho, co to je: „Sklad“ nad cestou, „Ve výrobě“ nad číslem, „Krok 2“ nad nadpisem karty.
Popisek skupiny v menu nebo v bočním rejstříku — text, který se čte jako orientace, ne jako obsah.
Kicker nad odstavcem v průvodci nebo na veřejné stránce (size="md").

Kdy nepoužít

Text pojmenovává STAV („ve výrobě“, „hotovo“) — to je IngotBadge: má rámeček, tón a pravidla pro kontrast, které holý popisek nemá.
Text je nadpis, který má stát v osnově stránky — to je IngotSection. Eyebrow žádnou roli nadpisu nenese schválně.
Popisek pole formuláře. Ten je label a patří k IngotField, aby ho odečítač spojil se vstupem.

Vlastnosti

children: ReactNode — Popisek, už přeložený. Verzálky dělá CSS.
as: "p" | "span" | "div" — Element. Výchozí p; span do řádku, div pro blok s dalším obsahem.
size: "sm" | "md" — sm (10,5 px) uvnitř komponent, md (token text-eyebrow, 11 px) nad odstavcem.
tone: "neutral" | "muted" | "accent" | "ok" | "inherit" — Barva z tokenů. inherit nechá barvu rodiči — odkaz, který mění barvu při najetí.
className: string — Jen rozvržení (odsazení, flex). Barvu a písmo určuje size a tone.
testId: string — Kotva pro testy.