Badges for React and Tailwind
A badge has one word to get its point across. Colour needs to mean something, contrast has to hold up at small sizes and the shape should sit neatly beside text. Check each one in both themes, where weak ones fade out. Install one with a single command, then use it for status, counts and short labels. Use them rarely so they keep their meaning.
1 component
About badges
Badges are small labels for status, counts and categories: new, beta, a number of unread messages or a plan name. Some animate with a shine or a pulse to draw the eye to something fresh.
Keep badge text to a word or two and use them sparingly, since a page of badges stops meaning anything. Make sure the colour isn't the only signal and that small text still has enough contrast to read.
Frequently asked questions
Render a small inline element with padding, a radius and a background, and offer a few variants for status, like neutral, success and warning. Keep it a span inside text so it flows with the line.
Position a small badge over the corner of an icon button, show the number, and cap it at something like 99+. Describe the count in the button's label so screen readers hear it too.
Only when something is new and worth noticing, like a just released feature. A shine or pulse on every badge turns the page into noise, so keep most of them still.
They're read as text, so the words must make sense on their own. Keep small badge text above the contrast minimum, which is harder than it looks on coloured backgrounds.
Pair a short word, like active or failed, with a colour and optionally an icon. Keep the set of statuses small and use the same colours for them everywhere in the product.
A badge marks a status or count on something. A tag labels what something is about and often links to more of the same. Tags can be many; badges should be few.
Move a narrow light gradient across the badge in a slow loop, or add a soft pulse behind it. Use it for one new thing at a time, so it keeps its meaning.