Notification badge

Examples

Basic

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 indicate 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.

With animation

To animate the icon within the notification badge, use the shouldNotify property. In this example, the notification badge icon will only animate if the notification count is greater than 0.

Props

NotificationBadge

*required
NameTypeDefaultDescription
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.
onAnimationEnd(event: React.AnimationEvent<HTMLButtonElement>) => voidCallback for when the animation of the notification badge icon ends.
shouldNotifybooleanfalseFlag indicating whether the notification badge animation should be triggered. Each time this prop is true, the animation will be triggered a single time.
variantNotificationBadgeVariant | 'read' | 'unread' | 'attention'NotificationBadgeVariant.readDetermines the variant of the notification badge.

CSS variables

Expand or collapse columnSelectorVariableValue