Notification badge

A notification badge is intended to be used with a notification drawer as a visible indicator to alert the user about incoming notifications.



The following example demonstrates the three variants of notification badge that are available: "read", "unread", and "attention".

The isExpanded property is also passed in to:

  • set the aria-expanded attribute on the notification badge,
  • apply visual styling on the notification badge, and
  • to indiciate that a notification drawer is expanded, for use-cases as seen in our notification drawer react demos.

With count

You can display a number within the notification badge by passing in the count property, to indicate how many read, unread, or attention notifications there are. The isExpanded property is also passed in, similar to the notification badge basic example.



aria-labelstringAdds an accessible label to the notification badge.
attentionIconReact.ReactNode<AttentionBellIcon />Icon to display for attention variant.
childrenReact.ReactNodeContent rendered inside the notification badge.
classNamestringAdditional classes added to the notification badge.
countnumber0A number displayed in the badge alongside the icon.
iconReact.ReactNode<BellIcon />Icon to display in the notification badge.
isExpandedbooleanfalseFlag for applying expanded styling and setting the aria-expanded attribute on the notification badge.
variantNotificationBadgeVariant | 'read' | 'unread' | 'attention'NotificationBadgeVariant.readDetermines the variant of the notification badge.

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub