React

Notification badge

ExamplesPropsCSS Variables

Examples

Basic

Props

NotificationBadge properties
NameTypeRequiredDefaultDescription
isReadbooleanfalseAdds styling to the notification badge to indicate it has been read
childrenReact.ReactNodecontent rendered inside the Notification Badge
classNamestringadditional classes added to the Notification Badge
aria-labelstringAdds 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