Badge

A status badge: the state of an entity in one word, mono and upper-case. It names a state, not an action.

When to use it

An entity has a state that is read at a glance — an order "in production", a quote "rejected", an account "archived".
In a table row or a detail header, where another hand-coloured <span> would otherwise appear.
The state is live and that should show — dot adds a dot. It is decoration on top; the meaning still lives in the text.

It is a count. A badge with a number is a different primitive with a different specification: round, a 99+ threshold, a mandatory screen-reader label, zero is not drawn — and the kit does not have it yet. A number is not a state, and confusing the two ends with a badge that is always lit.
It is meant to be clicked. A filter you can switch on is a chip and has to be a button, with focus and keyboard handling. A badge is text, not a control — which is why it has no onClick.
More than one of them could end up in a single table row. Two badges side by side read as one compound state nobody defined; fold them into one word, or move the second into a column of its own.
The message is a sentence, not a state. Upper case makes it unreadable, and IngotEmptyState or an ordinary paragraph carries it better.

children: ReactNode — The state in one word, already translated. The meaning is in the text, not the colour.
tone: neutral | ok | warn | danger | accent | ink — Defaults to neutral. A closed set — a seventh colour would be a seventh meaning nobody defined.
dot: boolean — A dot for a live state. It is aria-hidden, so it adds nothing for a screen reader.
testId: string — data-testid of the badge.