Data
Status badge
A pill that states the status of a record in one or two words.
Preview
Guidance
Provide the status word as the child, and a tone class: neutral (default), brand, success, warning, error or info. Map record states to tones once, in a shared function, so "Paid" is the same tone in every table.
- The word is the status; the dot and colour only support it. Success and error differ little in lightness, so never rely on colour alone and never ship a badge with no text.
- Text uses the
*-fgtoken on the*-bgtoken with the*-borderhairline: 4.5:1 or more in both themes. - Pills are correct here (badges, chips, tags) and wrong for buttons.
- Sentence case, at most two words. Keep numbers in
cv-ltrwhen the badge is in an Arabic table.