Badge | Glaze design system

Styles

When to use it

Use: A row or title names what a thing is in one or two words: v14, Production, Beta.
Use: An eval or a check has an outcome to show beside its name: Passed, Slow, Failed.
Use: A queue shows how many wait: count, capped at 99+.
Not for: The work is moving: queued, running, then an outcome. Use Status.
Not for: The person can press it to filter or remove it. Use Button.
Not for: The outcome needs a sentence and an action. Use Alert.

7 rules

Must: Use variant="ok", "warn" or "fail" only for an outcome, and write the outcome as the word. Because colour means status in Glaze, so a green badge that says Beta reads as a pass, and a tint with no word vanishes in grayscale.
Never: Make a Badge pressable with onClick or a link; use a Button. Because a flat tag has no hover, held or focus state, so nobody can tell it does something, and only a Button reads as something to press.
Never: Round a Badge to a pill or restyle its fill, height or type through className. Because a pill is how a Glaze control looks, so a pill badge beside a button reads as a second button.
Must: Pass a number as count, not as children, so it caps at max and keeps the exact figure. Because children print 1284 in a 20px tag that pushes the row, while count shows 99+ and reads 1,284 to a screen reader.
Should: Keep the label to one or two words in sentence case.
Should: Give a row at most one status badge; a second outcome belongs in its own column. Because two tints in one row give the eye two places to land.
Should: Write an ID or a version in a Badge as plain text, and an ID in a sentence with mono; never put mono at the badge's size.

4 checks

: Status words are 5.0:1 or better on their tint in both themes; neutral and outline are ink, 15:1 or better.
: A capped count shows max+ to the eye and reads the exact number; the title carries it on hover.
: A Badge is not focusable and takes no role; the word is its meaning.
: Forced colours draw a CanvasText border so the tag keeps its box.

6 edge cases

Long label: Never wraps; the badge stops at its container and clips. Keep it to two words.
Count of 0: Shows 0; leave the badge out when an empty queue needs no mention.
Count past max: Shows 99+, reads the exact number, and the title holds it.
Zoom 200%: The height grows with the text from its 20px minimum.
On the shell or a tint: neutral is the grey field, a step darker than the shell; use outline on grey.
Dark theme: The tints turn dark and the words light, each still 5.0:1 or better.

5 props

variant: 'neutral' | 'outline' | 'ok' | 'warn' | 'fail' default 'neutral'
size: 'default' | 'sm' default 'default'
count: number
max: number default 99
render: ReactElement

12 tokens