Badge
A badge is a small, often circular or rounded element used to display short information, status, or a numerical value. Commonly placed near or on top of another component (such as an icon or avatar), badges help draw attention to essential details like notifications, alerts, or item counts.
Usage
Notifications & Counts: A badge can highlight the number of new or unread items (messages, alerts, tasks).
Status & Labels: Use badges to denote a special or temporary condition (e.g., “New feature,” “On sale”).
Visual Emphasis: By adding a pop of color, badges quickly draw user attention to notable content or actions.
Use cases
Notification counts (e.g., “3” unread messages)
Status indicators (e.g., “New,” “Beta”)
Labeling or tagging an item with a succinct status (e.g., “VIP,” “Pro”)
Not to be confused with
Tag / Chip: While badges and tags both label content, a tag typically appears as a small pill-shaped element containing text or an icon, often used for categorization or filtering. A badge is usually smaller and attached to another component (like an icon or avatar).
Button: A button triggers an action. A badge’s primary purpose is to display a piece of information or status—it’s usually not meant to be interactive by itself (though it can be clickable in certain designs).
Best practices
Choose Distinct Colors
Use bold colors to make badges stand out (e.g., red for notifications, green for success, etc.).
Ensure text or numbers remain legible by maintaining sufficient color contrast.
Keep It Simple
A badge should be minimal in size and content—stick to short text (e.g., a number, a single word) so users can quickly parse it.
Position Wisely
Place badges in consistent locations (e.g., top-right corner of an icon or avatar).
Make sure they don’t obscure critical UI elements or overlap with text.
Consider Accessibility
If a badge conveys critical information (like the number of unread messages), ensure that screen readers also announce that information.
Provide alternative text or ARIA labels as needed (e.g., “3 unread notifications”).
Handle Large Counts Gracefully
For large numbers (100+), consider displaying “99+” or a similar condensed format to prevent overflow.
Use tooltips or alternative UI patterns if a precise count is still important.
Consistency
Use consistent shapes (circle, rounded rectangle) and styles (border, shadow) across all badges to maintain a cohesive look.
Standardize spacing and typography to align with your design system.
Keep badge text concise—most badges are small in size, so longer strings can become illegible or crowded.
Summary
A badge is a small but powerful UI element for highlighting notifications, statuses, or counts. By keeping them visually distinct, concise, and properly positioned, badges effectively draw attention to important information without cluttering the interface. Consistency in color, style, and placement—along with accessibility considerations—ensures badges enhance your design system and improve the user experience.
