unreadBadge

An unread badge, or unread badge indicator, is a small visual cue used in user interfaces to show the number of unread items associated with a control, such as a messages tab, a notifications menu, or a inbox icon. The badge is typically overlaid on the related icon and may display a numeric count or a simple dot when counts are not shown or are zero.

Common usage scenarios include messaging apps, email clients, collaboration tools, and social platforms. The badge draws attention to new activity and helps users decide where to focus. When the value is large, designers often cap it (for example, displaying 99+). Some implementations allow the badge to be hidden when there are no unread items.

Design considerations include placement (commonly at the top-right corner of the icon), shape (circle or rounded rectangle), color (high contrast; red is conventional for notifications but other high-contrast colors may be used to fit branding), and legibility at small sizes. Accessibility should be addressed with clear text for screen readers (for example, an aria-label such as "You have 3 unread messages") and by using appropriate live regions to announce updates.

Implementation notes can involve overlay positioning, updating in response to data changes, and ensuring the element is keyboard navigable as part of the interactive control. It should be non-intrusive and not disruptive to the user experience; excessive blinking or animation is generally discouraged.

Related concepts include notification badges and status indicators. The term unread badge is widely used in mobile and web design to refer to this pattern.