Badge

Stavový štítek: stav entity jedním slovem, mono a verzálkami. Pojmenovává stav, ne akci.

Kdy použít

Entita má stav, který se čte na první pohled — objednávka „ve výrobě“, poptávka „zamítnuto“, účet „archivováno“.
V řádku tabulky nebo v hlavičce detailu, kde by jinak vznikl další ručně obarvený <span>.
Stav právě běží a má to být vidět — dot přidá tečku. Je to dekorace navíc, význam pořád nese text.

Je to počet. Odznak s číslem je jiné primitivum s jinou specifikací: kulatý, práh 99+, povinný popisek pro odečítač, nula se nekreslí — a kit ho zatím nemá. Číslo není stav a plést je znamená, že jednou přibude štítek, který svítí pořád.
Má se na to dát kliknout. Filtr, který jde zapnout, je chip a musí být tlačítko s fokusem a klávesovou obsluhou. Štítek je text, ne ovládací prvek — onClick na něm proto nenajdeš.
Na jeden řádek tabulky by jich šlo víc než jeden. Dva štítky vedle sebe se čtou jako jeden složený stav, který nikdo nedefinoval; slož je do jednoho slova, nebo ten druhý dej do sloupce.
Sdělení je věta, ne stav. Verzálky ji udělají nečitelnou a IngotEmptyState nebo obyčejný odstavec ji unesou líp.

children: ReactNode — Stav jedním slovem, už přeložený. Význam nese text, ne barva.
tone: neutral | ok | warn | danger | accent | ink — Výchozí neutral. Uzavřená množina — sedmá barva by byla sedmý význam, který nikdo nedefinoval.
dot: boolean — Tečka pro živý stav. Je aria-hidden, takže nic nepřidává odečítači.
testId: string — data-testid štítku.