Skip to content
PatternFly logo

Notification badge

Examples

Basic



With count



Expanded



Documentation

Overview

Always add a modifier class to indicate read, unread, or attention state. Never use the class .pf-c-notification-badge on its own. This component is designed to be used within a dark component such as the masthead.

Accessibility

Be sure that the component associated with this indicator handles screen reader 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-c-notification-badge__count
<span>
Initiates a notification badge count.
.pf-m-read
.pf-c-notification-badge
Applies read notification badge styling.
.pf-m-unread
.pf-c-notification-badge
Applies unread notification badge styling.
.pf-m-attention
.pf-c-notification-badge
Applies attention notification badge styling.
.pf-m-expanded
.pf-c-notification-badge
Applies expanded 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-read--m-expanded--after--BackgroundColor
#3c3f42
.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-unread--hover--after--BackgroundColor
#004080
.pf-c-notification-badge--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor
#004080
.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--m-attention--hover--after--BackgroundColor
#a30000
.pf-c-notification-badge--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor
#a30000
.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-unread:hover--pf-c-notification-badge--after--BackgroundColor
#004080
.pf-c-notification-badge.pf-m-attention--pf-c-notification-badge--after--BackgroundColor
#c9190b
.pf-c-notification-badge.pf-m-attention:hover--pf-c-notification-badge--m-attention--after--BackgroundColor
#a30000
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-read--Color
#fff
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-read--after--BackgroundColor
#3c3f42
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-notification-badge.pf-m-expanded--pf-c-notification-badge--m-attention--after--BackgroundColor
#a30000

View source on GitHub