Notification Dot
ProA small, unobtrusive coloured dot placed on icons, avatars, or navigation items to signal that there is new or unread content. Unlike Badge, it carries no text or number — just a visual flag. Commonly used on inbox icons, bell icons, and navigation tabs.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Small red dot indicating new or unread content. | Use on icons and navigation items to flag unread items. |
| With Count |
Usage Guidelines
Do
Position consistently — top-right corner of the parent element.
Don't
Use notification dots without an accessible alternative for screen readers.
Do
Provide accessible context via aria-label on the parent — "Inbox, new messages".
Don't
Place dots on more than 2–3 items simultaneously — it dilutes urgency.
Do
Remove the dot once the user has acknowledged the notification.
Don't
Use pulsing animation excessively — reserve it for truly urgent items.
Code
Design Tokens
Accessibility
- The dot must have aria-hidden="true" since it is purely visual.
- The parent element needs an aria-label describing the notification — "Inbox, new messages".
- Do not use colour alone as the indicator — provide text context in the accessible label.
- Dynamic additions should update the parent aria-label for screen reader announcements.