Badges

Badges

Badges are compact labels for counts, statuses, categories, and other short pieces of metadata.

Core concept

Explain badge sizing, text-bg utilities, pill styling, and placing badges inside headings, buttons, navigation, and cards.

Using it in a real interface

Use an order status badge, unread notification count, and category label. Explain why badges should contain short content and should not become miniature paragraphs.

Implementation notes

Do not rely on badge color alone to communicate status. Use text such as Paid, Pending, or Failed so the meaning survives grayscale viewing and assistive technology.