Badge [Tag]

Overview

Badge is a compact label component for communicating status, category, count, and contextual meaning at a glance. With 11 semantic variants and 4 appearance styles, it covers every surface and message type, from system states and verified status to availability and highlight callouts, with number-only and icon-only display modes for counters and status dots.

When should you use them?

Use a badge to communicate status, a count, or a category at a glance, like a 'New' label, a notification count, an online status dot, or a verified mark. Unlike chips, badges are read-only indicators, so use a chip instead when the value needs to be removable or selectable.

How should you use them?

• Use a badge as a read-only indicator; use a chip when the value is interactive or removable.
• Match the variant to meaning (Success, Danger, Warning, Verified) so the status reads instantly.
• Use Number Only mode for notification counts and Icon Only mode for status dots.
• Keep badge text to a single short word or a small number.
• Use color and an icon together so meaning isn't carried by color alone.
• Make sure badge meaning is available to screen readers, not just conveyed visually.