Skip to content
PatternFly logo

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.

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

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.
Deprecated: isReadbooleanUse the variant prop instead - Adds styling to the notification badge to indicate it has been read.
variantNotificationBadgeVariant | 'read' | 'unread' | 'attention'isRead ? 'read' : 'unread'Determines the variant of the notification badge.

CSS variables

.pf-c-notification-badge--pf-c-notification-badge--PaddingTop
0.375rem
.pf-c-notification-badge--pf-c-notification-badge--PaddingRight
1rem
.pf-c-notification-badge--pf-c-notification-badge--PaddingBottom
0.375rem
.pf-c-notification-badge--pf-c-notification-badge--PaddingLeft
1rem
.pf-c-notification-badge--pf-c-notification-badge--MarginTop
calc(-1 * 0.375rem)
.pf-c-notification-badge--pf-c-notification-badge--MarginRight
calc(-1 * 1rem)
.pf-c-notification-badge--pf-c-notification-badge--MarginBottom
calc(-1 * 0.375rem)
.pf-c-notification-badge--pf-c-notification-badge--MarginLeft
calc(-1 * 1rem)
.pf-c-notification-badge--pf-c-notification-badge--after--BorderColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--after--BorderRadius
3px
.pf-c-notification-badge--pf-c-notification-badge--after--BorderWidth
0
.pf-c-notification-badge--pf-c-notification-badge--after--Top
0
.pf-c-notification-badge--pf-c-notification-badge--after--Right
0
.pf-c-notification-badge--pf-c-notification-badge--after--Width
auto
.pf-c-notification-badge--pf-c-notification-badge--after--Height
auto
.pf-c-notification-badge--pf-c-notification-badge--after--BackgroundColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--after--TranslateX
0
.pf-c-notification-badge--pf-c-notification-badge--after--TranslateY
0
.pf-c-notification-badge--pf-c-notification-badge__i--Width
auto
.pf-c-notification-badge--pf-c-notification-badge__i--Height
auto
.pf-c-notification-badge--pf-c-notification-badge--m-read--after--BorderColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--m-read--after--BackgroundColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor
#3c3f42
.pf-c-notification-badge--pf-c-notification-badge--m-unread--Color
#fff
.pf-c-notification-badge--pf-c-notification-badge--m-unread--after--BackgroundColor
#06c
.pf-c-notification-badge--pf-c-notification-badge--m-unread--hover--after--BackgroundColor
#004080
.pf-c-notification-badge--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor
#004080
.pf-c-notification-badge--pf-c-notification-badge--m-attention--Color
#fff
.pf-c-notification-badge--pf-c-notification-badge--m-attention--after--BackgroundColor
#c9190b
.pf-c-notification-badge--pf-c-notification-badge--m-attention--hover--after--BackgroundColor
#a30000
.pf-c-notification-badge--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor
#a30000
.pf-c-notification-badge--pf-c-notification-badge__count--MarginLeft
0.25rem
.pf-c-notification-badge--pf-c-notification-badge--pf-icon-attention-bell--LineHeight
1.3
.pf-c-notification-badge.pf-m-read--pf-c-notification-badge--after--BackgroundColor
transparent
.pf-c-notification-badge.pf-m-read--pf-c-notification-badge--after--BorderColor
transparent
.pf-c-notification-badge.pf-m-unread--pf-c-notification-badge--after--BackgroundColor
#06c
.pf-c-notification-badge.pf-m-unread:hover--pf-c-notification-badge--after--BackgroundColor
#004080
.pf-c-notification-badge.pf-m-attention--pf-c-notification-badge--after--BackgroundColor
#c9190b
.pf-c-notification-badge.pf-m-attention:hover--pf-c-notification-badge--m-attention--after--BackgroundColor
#a30000
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-read--Color
#fff
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-read--after--BackgroundColor
#3c3f42
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-attention--after--BackgroundColor
#a30000

View source on GitHub