Please don't forget to read Usage part of each element.
A notification dot notifies the user that something is new or updated, without showing a count.
A notification dot notifies the user that something is new or updated without showing a count, such as an "unread report", or activity notification. It may be useful as a less prominent notification, even when the count is known.
A notification dot will appear on an icon or close to the relevant item, often a label.
- On an icon
- Close to the relevant item
The notification dot comes with two sizes for desktop, and one on mobile.
Small notification dot
For icon from 24px to 30px.
Big notification dot (desktop only)
For icon bigger than 30px.
Use bold text to indicate that a notification hasn't been read.
- Unread Notification dot visible + text label in bold.
- Read No notification dot + text label in regular.
Icon minimum size
The minimum size of an icon is 2rem in mobile and 2.4rem in desktop.
If you need a text label, use a patch instead. Patches provide a way to highlight two types of content: informational and promotional messages.
Sizes and colors
depend of your needs on the notification dot:
- status: A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.
- alert: A message with important, and usually time-sensitive, information.
Don't forget the screenreader message (
) inside the notification dot and on the
Unread notification with icon
Mobile and less then 30px icon
to the icon with notification.
More than 30px icon
to the icon.
Unread notification with copy
Copy must be in bold.
varius ut erat. Donec et sapien mi. Maecenas sit amet