Badge

A small label for status, category or count. Two published components, fifteen variants each, five colours across three states.

Two components, thirty variants

Using the Badge

Why are there hover and focus states on a label?
Because a badge is often a link or a filter chip rather than plain text - a tag you can click to filter by it, a status you can click to open. shadcn/ui lets the badge render as an anchor, so the kit draws the states that come with that. Used as a static label, you simply never leave Default.
Why is there no disabled state?
Nothing here can be disabled. A badge that is not interactive has no disabled meaning, and one that is interactive is a link - links do not disable, they disappear or stop being links. Adding the variant would have been three more drawings of the same thing.
When do I use Badge Number instead of Badge?
When the content is a count. It is a fixed 20px circle rather than a pill that hugs its text, so a row of counters stays aligned as the numbers change. Past two digits it stops being a circle, and at that point the honest answer is a pill with a plus.
Why does Ghost exist next to Outline?
Outline carries a border and no fill; Ghost carries neither until you hover it. Ghost is for badges sitting inside something that already has edges - a table cell, a list row - where another border would be one line too many.