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 Props CSS Variables

Examples

Basic

Props

NotificationBadge properties
Name	Type	Required	Default	Description
isRead	boolean	No	false	Adds styling to the notification badge to indicate it has been read
children	React.ReactNode	No		content rendered inside the Notification Badge
className	string	No		additional classes added to the Notification Badge
aria-label	string	No		Adds accessible text to the Notification Badge.

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