Badge

A state, said in a word. The colour agrees with the word — it never replaces it.

The drawn component names its colours by hue: Gray, Red, Yellow, Green, Blue, Indigo, Purple, Pink. These are named for meaning instead. A badge that takes a colour makes every caller decide what green means, and the answers drift — one screen’s green is “paid”, another’s is “active”, a third’s is “low risk”. Naming the meaning keeps that decision in one place.

Two treatments, not one

Switch the theme at the top of the page and the badge changes shape, not just colour. In light it is a tinted fill with no outline. In dark the fill drops back to the sunken surface for every tone and an outline appears in the tone’s own colour — a tinted fill at the dark end of a ramp goes muddy on a dark ground, where an outline stays crisp.

This is the one component that carries theme logic of its own. The switch is the same for every tone, so writing it as twelve more tokens would have cost more than it explained.

Tones

Each pair reuses status tokens that already existed and, until this component, had nothing consuming them. Ratios below are for the light treatment, computed as the page renders.

Sizes

With an icon

An icon sits before the label at a fixed 16px, rather than scaling with the text — a mark that tracks the font size makes a small badge and a medium one disagree about how big a tick is. These are IBM Carbon icons, the set the design system uses.

With a dot

Where there is no icon that fits, a dot carries the tone at a fraction of the width. The label still says what the state is: a dot is a coloured circle, and colour and a coloured circle fail exactly the same people. An icon takes precedence over a dot — it says more.

Accessibility

A badge carries no role. It is text with a background, not a control, and announcing it as a button or as a status that never changes would be worse than announcing nothing.

There is no icon-only badge. If the colour is the only thing saying what the state is, nothing is saying it to a person who cannot separate the hues — which is why every badge here has a word in it.

The dot and the icon are hidden from assistive technology. Both repeat what the label already says.