Skip to Content
Patternfly Logo

Notification badge

Use a Notification badge when you want to apply a small badge to an icon. This is primarily used to indicate incoming notifications in the page header, but it can be useful for any use case where adding a badge to an icon is needed.

ExamplesPropsCSS Variables

Examples

Basic

Props

NotificationBadge properties
NameTypeRequiredDefaultDescription
isReadbooleanNofalseAdds styling to the notification badge to indicate it has been read
childrenReact.ReactNodeNocontent rendered inside the Notification Badge
classNamestringNoadditional classes added to the Notification Badge
aria-labelstringNoAdds accessible text to the Notification Badge.

CSS Variables

--pf-c-notification-badge__i--Heightc_notification_badge__i_Height
1rem
--pf-c-notification-badge__i--Widthc_notification_badge__i_Width
1rem
--pf-c-notification-badge--after--BackgroundColorc_notification_badge_after_BackgroundColor
transparent
--pf-c-notification-badge--after--BorderColorc_notification_badge_after_BorderColor
transparent
--pf-c-notification-badge--after--BorderRadiusc_notification_badge_after_BorderRadius
30em
--pf-c-notification-badge--after--BorderWidthc_notification_badge_after_BorderWidth
1px
--pf-c-notification-badge--after--Heightc_notification_badge_after_Height
calc(0.5rem + 1px + 1px)
--pf-c-notification-badge--after--Rightc_notification_badge_after_Right
0
--pf-c-notification-badge--after--Topc_notification_badge_after_Top
0
--pf-c-notification-badge--after--TranslateXc_notification_badge_after_TranslateX
50%
--pf-c-notification-badge--after--TranslateYc_notification_badge_after_TranslateY
calc(1px*-1)
--pf-c-notification-badge--after--Widthc_notification_badge_after_Width
calc(0.5rem + 1px + 1px)
--pf-c-notification-badge--m-read--after--BackgroundColorc_notification_badge_m_read_after_BackgroundColor
transparent
--pf-c-notification-badge--m-read--after--BorderColorc_notification_badge_m_read_after_BorderColor
transparent
--pf-c-notification-badge--m-unread--after--BackgroundColorc_notification_badge_m_unread_after_BackgroundColor
#2b9af3