Badge

A badge is a small UI indicator for numbers, statuses, and labels on other components.

Choose the right pattern

Pattern	Duration	Use when
Badge	Persistent	Status label, count on nav item, “New” on a menu entry
Toast / snackbar	Transient	Action completed or failed; auto-dismiss after a few seconds
Inline error	Until fixed	Field validation tied to a specific input

Use and purpose

• Visual cues — unread counts, cart items
• Status indicators — New, On Sale, Beta
• Notifications — new updates or events
• Counters — pending tasks, new list items
• Menu items — highlight sections with new or updated content

Variants

Variant	Usage
Primary	Default status or count
Secondary	Neutral or de-emphasized label

Examples

Accessibility

Screen readers may read badge text as random extra words if not paired with meaningful context. Do not rely on badge styling alone — ensure the parent control or label conveys the full meaning.