Badge

[davidhunter08]

What

The notification badge shows a number to let a user know how many of a thing there are.

Example

Journeys used on

1. GP health record
2. Messages

Related components

Panel Link#3

GOV.UK discussion

Notification badge#169

Progress

Design checklist

• [x] Gather evidence and consolidate designs
• [x] Create a rough proposal (Figma)
• [x] Build a working version (HTML or Native)
• [x] Draft guidance
• [x] Design sign off

Development criteria

• [ ] Make WCAG 2.2 compliant
• [x] Add HTML / Nunjucks version
• [x] Add vue.js version
• [x] Add Figma version
• [x] Add design system guidance

[davidhunter08]

[davidhunter08]

Examples

Blue dots in the wild.

Adidas App


Apple Mail


[davidhunter08]

Colours

Using red versus blue...

• It depends on the surrounding colours and how much you want to disrupt your users' attention.
• Red is generally associated with high level of alertness or "critical" warnings.
• However, it's used on many sites for neutral notifications because of the high contrast with the colour of surrounding elements (many colours on SE, blue on Facebook, shades of grey on Google, etc).
• This ensures high engagement with notifications but, at the same time, it may break users' interaction flow with your app since stark contrast draws a lot of attention.
• Thus, if you want your users to act on notifications ASAP make them red (unless the surrounding elements are of reddish colours). Otherwise, blue will work, too.

[teodorapreda2]

About badges in Material design system

A small badge is a simple circle, used to indicate an unread notification.

A large badge contains label text communicating item count information.

https://m3.material.io/components/badges/guidelines#c0dbda60-2be8-41ad-b604-4cbea628a5a4

Do

Don't

Avoid using custom color mappings for the badge container and label text and don’t choose colors that won’t pass the 3:1 contrast ratio

Accessibility with labels

The accessibility label for a badge item will be read after its navigation destination. Any numerical badges will have their number read, while non-counting badges will simply announce “new notification.”

[davidhunter08]

Note from the notifications and messaging team regarding the messages badge count:

we can now show and register the total number of unread messages without having all the messages loaded in the inbox... so they have uncapped it from 9+ now to just the total number of messages. so say someone actually has 12 unread then the inbox will now say You have 12 unread messages - this should be the case for the total of the pill on homepage and message hub as well

[davidhunter08]

Note from the notifications and messaging team regarding the messages badge count:

we can now show and register the total number of unread messages without having all the messages loaded in the inbox... so they have uncapped it from 9+ now to just the total number of messages. so say someone actually has 12 unread then the inbox will now say You have 12 unread messages - this should be the case for the total of the pill on homepage and message hub as well

Question: At what number do we include a + to indicate more? 100 (99+)? 1000 (999+)?