About this set
The badges most interfaces need first, each shown with realistic content. Solid pills mark invoice states such as Paid, Pending, Overdue, Refunded and Draft, each with a small icon beside the word. Dot badges report service health on a neutral pill, with a coloured dot and a Live badge whose dot sends out a soft pulse. Soft badges use a pale tint with dark text of the same hue for order states, and outline badges carry job details such as Remote or Contract where a quieter label fits. The last row puts notification counts on icon buttons: 3 unread notifications, 12 messages, 2 basket items, a 99+ overflow, a dot-only indicator for new replies and a count inside a text button. Use solid pills where the status is the main thing on the row, soft or outline badges in dense tables, and dot badges for live system state. Every badge is a word, so colour is never the only signal, and each count carries visually hidden text so the button reads as Notifications, 3 unread.
What’s included
- Solid, dot, soft and outline badge styles from one base class
- Notification counts on icon buttons with hidden text such as 3 unread
- A 99+ overflow count and a dot-only indicator with a text name
- Live badge with a pulsing dot that stops under reduced motion
- Every status is a word as well as a colour
Accessibility
Badges are plain text, so the status is read as a word and colour is never the only cue. Icon buttons have a visually hidden name and the count adds hidden context, for example Messages, 12 unread, and the dot-only indicator is named Comments, new replies. Buttons show a 2px indigo focus outline, and the pulse and hover transitions switch off under prefers-reduced-motion.
Customise it
In plain CSS each style is a modifier on .bdg that sets --bdg-bg, --bdg-fg and --bdg-line, and dot colours come from --dot. Bootstrap uses the same modifiers on .badge.rounded-pill with --bs-badge-* variables; in Tailwind change the bg-, text- and border- colour utilities on each badge.
