Patternfly Logo

Notification badge

Examples

Basic

With count

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 screen reader 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-c-notification-badge__count<span>Initiates a notification badge count.
.pf-m-read.pf-c-notification-badgeApplies read notification badge styling.
.pf-m-unread.pf-c-notification-badgeApplies unread notification badge styling.
.pf-m-attention.pf-c-notification-badgeApplies attention notification badge styling.

CSS variables

.pf-c-notification-badge--pf-c-notification-badge--PaddingTop
0.375rem
.pf-c-notification-badge--pf-c-notification-badge--PaddingRight
1rem
.pf-c-notification-badge--pf-c-notification-badge--PaddingBottom
0.375rem
.pf-c-notification-badge--pf-c-notification-badge--PaddingLeft
1rem
.pf-c-notification-badge--pf-c-notification-badge--MarginTop
calc(-1 * 0.375rem)
.pf-c-notification-badge--pf-c-notification-badge--MarginRight
calc(-1 * 1rem)
.pf-c-notification-badge--pf-c-notification-badge--MarginBottom
calc(-1 * 0.375rem)
.pf-c-notification-badge--pf-c-notification-badge--MarginLeft
calc(-1 * 1rem)
.pf-c-notification-badge--pf-c-notification-badge--after--BorderColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--after--BorderRadius
3px
.pf-c-notification-badge--pf-c-notification-badge--after--BorderWidth
0
.pf-c-notification-badge--pf-c-notification-badge--after--Top
0
.pf-c-notification-badge--pf-c-notification-badge--after--Right
0
.pf-c-notification-badge--pf-c-notification-badge--after--Width
auto
.pf-c-notification-badge--pf-c-notification-badge--after--Height
auto
.pf-c-notification-badge--pf-c-notification-badge--after--BackgroundColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--after--TranslateX
0
.pf-c-notification-badge--pf-c-notification-badge--after--TranslateY
0
.pf-c-notification-badge--pf-c-notification-badge__i--Width
auto
.pf-c-notification-badge--pf-c-notification-badge__i--Height
auto
.pf-c-notification-badge--pf-c-notification-badge--m-read--after--BorderColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--m-read--after--BackgroundColor
transparent
.pf-c-notification-badge--pf-c-notification-badge--m-unread--Color
#fff
.pf-c-notification-badge--pf-c-notification-badge--m-unread--after--BackgroundColor
#06c
.pf-c-notification-badge--pf-c-notification-badge--m-attention--Color
#fff
.pf-c-notification-badge--pf-c-notification-badge--m-attention--after--BackgroundColor
#c9190b
.pf-c-notification-badge--pf-c-notification-badge__count--MarginLeft
0.25rem
.pf-c-notification-badge--pf-c-notification-badge--pf-icon-attention-bell--LineHeight
1.3
.pf-c-notification-badge.pf-m-read--pf-c-notification-badge--after--BackgroundColor
transparent
.pf-c-notification-badge.pf-m-read--pf-c-notification-badge--after--BorderColor
transparent
.pf-c-notification-badge.pf-m-unread--pf-c-notification-badge--after--BackgroundColor
#06c
.pf-c-notification-badge.pf-m-attention--pf-c-notification-badge--after--BackgroundColor
#c9190b

View source on Github