Patternfly Logo

Examples

Basic

Examples

With count

Props

NotificationBadge properties
NameTypeRequiredDefaultDescription
aria-labelstringNoAdds accessible text to the notification badge.
attentionIconReact.ReactNodeNo<AttentionBellIcon />Icon to display for attention variant
childrenReact.ReactNodeNocontent rendered inside the notification badge
classNamestringNoadditional classes added to the notification badge
countnumberNo0A number displayed in the badge alongside the icon
iconReact.ReactNodeNo<BellIcon />Icon do display in notification badge
Deprecated: isReadbooleanNoUse the variant prop instead - Adds styling to the notification badge to indicate it has been read
variantNotificationBadgeVariant | 'read' | 'unread' | 'attention'NoisRead ? '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-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-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__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--after--BackgroundColor
#a30000

View source on GitHub