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>| Prop | Type | Default | |
|---|---|---|---|
variant |
outline | soft | accent | good | warn | bad | info |
outline |