HTML

Notification badge

ExamplesDocumentationCSS Variables

Examples

Notification badge

Copied to clipboard

Documentation

Overview

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

Class Applied to Outcome
.pf-c-notification-badge <div> Initiates a notification badge. Always use it with a modifier class.
.pf-m-read .pf-c-notification-badge Applies read notification badge styling.
.pf-m-unread .pf-c-notification-badge Applies unread notification badge styling.

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