HTML

Notification badge

ExamplesDocumentationCSS Variables

Examples

Basic

Documentation

Overiew

Always add a modifier class. Never use the class .pf-c-notification-badge on its own.

Accessibility

Be sure that the component associated with this indicator handles screenreader text indicating read or unread notifications.

Usage

ClassApplied toOutcome
.pf-c-notification-badge<div>Initiates a notification badge. Always use it with a modifier class.
.pf-m-read.pf-c-notification-badgeApplies read notification badge styling.
.pf-m-unread.pf-c-notification-badgeApplies unread notification badge styling.

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