Badge
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/badge.jsonA badge is not a button. It is state attached to something — a count, a status, a label. If it can be clicked, it is a Chip.
Colour is emphasis, never the message. A badge that means “failed” says so in words as well. Colour alone is invisible to a reader who does not separate red from green, and to anyone printing the screen.
<Badge variant="bad">Failed</Badge>Props
Read from the types in ui/badge.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
| Prop | Type | Default | |
|---|---|---|---|
variant | outline | soft | accent | good | warn | bad | info | 'outline' |
And every prop of React's HTMLAttributes<HTMLSpanElement>, passed on.
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 4 rules applied and passed, and none failed. The accessibility report has every item.
History
Each release that changed ui/badge.tsx - the file a product copies - newest first.