Skip to content
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. This component is designed to be used within a dark component such as the masthead.

Note: The page component currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.

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.

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-unread--hover--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__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--after--BackgroundColor
#a30000

View source on GitHub