Notification badge

Use a Notification badge when you want to apply a small badge to an icon. This is primarily used to indicate incoming notifications in the page header, but it can be useful for any use case where adding a badge to an icon is needed.

Examples Documentation CSS Variables

Examples

Basic

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	--pf-c-notification-badge--after--BorderColor	#fff
--pf-c-notification-badge--after--BorderColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-notification-badge	--pf-c-notification-badge--after--BorderRadius	30em
--pf-c-notification-badge--after--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-notification-badge	--pf-c-notification-badge--after--BorderWidth	1px
--pf-c-notification-badge--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.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	calc(0.5rem + 1px + 1px)
--pf-c-notification-badge--after--Width calc(--pf-global--spacer--sm + --pf-c-notification-badge--after--BorderWidth + --pf-c-notification-badge--after--BorderWidth) calc($pf-global--spacer--sm + --pf-global--BorderWidth--sm + --pf-global--BorderWidth--sm) calc($pf-global--spacer--sm + $pf-global--BorderWidth--sm + $pf-global--BorderWidth--sm) calc(pf-size-prem(8px) + 1px + 1px) calc(0.5rem + 1px + 1px)
	.pf-c-notification-badge	--pf-c-notification-badge--after--Height	calc(0.5rem + 1px + 1px)
--pf-c-notification-badge--after--Height calc(--pf-global--spacer--sm + --pf-c-notification-badge--after--BorderWidth + --pf-c-notification-badge--after--BorderWidth) calc($pf-global--spacer--sm + --pf-global--BorderWidth--sm + --pf-global--BorderWidth--sm) calc($pf-global--spacer--sm + $pf-global--BorderWidth--sm + $pf-global--BorderWidth--sm) calc(pf-size-prem(8px) + 1px + 1px) calc(0.5rem + 1px + 1px)
	.pf-c-notification-badge	--pf-c-notification-badge--after--BackgroundColor	transparent
	.pf-c-notification-badge	--pf-c-notification-badge--after--TranslateX	50%
	.pf-c-notification-badge	--pf-c-notification-badge--after--TranslateY	calc(1px * -1)
--pf-c-notification-badge--after--TranslateY calc(--pf-c-notification-badge--after--BorderWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-notification-badge	--pf-c-notification-badge__i--Width	1rem
--pf-c-notification-badge__i--Width --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-badge	--pf-c-notification-badge__i--Height	1rem
--pf-c-notification-badge__i--Height --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-badge	--pf-c-notification-badge--m-read--after--BackgroundColor	transparent
	.pf-c-notification-badge	--pf-c-notification-badge--m-read--after--BorderColor	transparent
	.pf-c-notification-badge	--pf-c-notification-badge--m-unread--after--BackgroundColor	#2b9af3
--pf-c-notification-badge--m-unread--after--BackgroundColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-300 #2b9af3
	.pf-c-notification-badge.pf-m-unread::after	--pf-c-notification-badge--after--BackgroundColor	#2b9af3
--pf-c-notification-badge--after--BackgroundColor --pf-c-notification-badge--m-unread--after--BackgroundColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-300 #2b9af3
	.pf-c-notification-badge.pf-m-read::after	--pf-c-notification-badge--after--BackgroundColor	transparent
--pf-c-notification-badge--after--BackgroundColor --pf-c-notification-badge--m-read--after--BackgroundColor transparent
	.pf-c-notification-badge.pf-m-read::after	--pf-c-notification-badge--after--BorderColor	transparent
--pf-c-notification-badge--after--BorderColor --pf-c-notification-badge--m-read--after--BorderColor transparent