React

NotificationBadge

ExamplesPropsCSS variables

Examples

Simple notification badge

Copied to clipboard

Props

NotificationBadge props

The NotificationBadge component accepts the following props.

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_Height1rem
--pf-c-notification-badge__i--Widthc_notification_badge__i_Width1rem
--pf-c-notification-badge--after--BackgroundColorc_notification_badge_after_BackgroundColortransparent
--pf-c-notification-badge--after--BorderColorc_notification_badge_after_BorderColortransparent
--pf-c-notification-badge--after--BorderRadiusc_notification_badge_after_BorderRadius30em
--pf-c-notification-badge--after--BorderWidthc_notification_badge_after_BorderWidth1px
--pf-c-notification-badge--after--Heightc_notification_badge_after_Heightcalc(0.5rem + 1px + 1px)
--pf-c-notification-badge--after--Rightc_notification_badge_after_Right0
--pf-c-notification-badge--after--Topc_notification_badge_after_Top0
--pf-c-notification-badge--after--TranslateXc_notification_badge_after_TranslateX50%
--pf-c-notification-badge--after--TranslateYc_notification_badge_after_TranslateYcalc(1px * -1)
--pf-c-notification-badge--after--Widthc_notification_badge_after_Widthcalc(0.5rem + 1px + 1px)
--pf-c-notification-badge--m-read--after--BackgroundColorc_notification_badge_m_read_after_BackgroundColortransparent
--pf-c-notification-badge--m-read--after--BorderColorc_notification_badge_m_read_after_BorderColortransparent
--pf-c-notification-badge--m-unread--after--BackgroundColorc_notification_badge_m_unread_after_BackgroundColor#2b9af3