Notification badge

A notification badge is intended to be used with a notification drawer as a visible indicator to alert the user about incoming notifications.

Examples

Basic

With count

Props

NotificationBadge

*required
Name	Type	Default	Description
aria-label	string		Adds accessible text to the notification badge.
attentionIcon	React.ReactNode	<AttentionBellIcon />	Icon to display for attention variant
children	React.ReactNode		content rendered inside the notification badge
className	string		additional classes added to the notification badge
count	number	0	A number displayed in the badge alongside the icon
icon	React.ReactNode	<BellIcon />	Icon do display in notification badge
Deprecated: isRead	boolean		Use the variant prop instead - Adds styling to the notification badge to indicate it has been read
variant	NotificationBadgeVariant \| 'read' \| 'unread' \| 'attention'	isRead ? 'read' : 'unread'	Determines the variant of the notification badge

CSS variables


	.pf-c-notification-badge	--pf-c-notification-badge--PaddingTop	0.375rem
--pf-c-notification-badge--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-notification-badge	--pf-c-notification-badge--PaddingRight	1rem
--pf-c-notification-badge--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-badge	--pf-c-notification-badge--PaddingBottom	0.375rem
--pf-c-notification-badge--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-notification-badge	--pf-c-notification-badge--PaddingLeft	1rem
--pf-c-notification-badge--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-notification-badge	--pf-c-notification-badge--MarginTop	calc(-1 * 0.375rem)
--pf-c-notification-badge--MarginTop calc(-1 * --pf-global--spacer--form-element) calc(-1 * $pf-global--spacer--form-element) calc(-1 * pf-size-prem(6px)) calc(-1 * 0.375rem)
	.pf-c-notification-badge	--pf-c-notification-badge--MarginRight	calc(-1 * 1rem)
--pf-c-notification-badge--MarginRight calc(-1 * --pf-global--spacer--md) calc(-1 * $pf-global--spacer--md) calc(-1 * pf-size-prem(16px)) calc(-1 * 1rem)
	.pf-c-notification-badge	--pf-c-notification-badge--MarginBottom	calc(-1 * 0.375rem)
--pf-c-notification-badge--MarginBottom calc(-1 * --pf-global--spacer--form-element) calc(-1 * $pf-global--spacer--form-element) calc(-1 * pf-size-prem(6px)) calc(-1 * 0.375rem)
	.pf-c-notification-badge	--pf-c-notification-badge--MarginLeft	calc(-1 * 1rem)
--pf-c-notification-badge--MarginLeft calc(-1 * --pf-global--spacer--md) calc(-1 * $pf-global--spacer--md) calc(-1 * pf-size-prem(16px)) 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--after--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 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--m-unread--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-notification-badge	--pf-c-notification-badge--m-unread--after--BackgroundColor	#06c
--pf-c-notification-badge--m-unread--after--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-notification-badge	--pf-c-notification-badge--m-unread--hover--after--BackgroundColor	#004080
--pf-c-notification-badge--m-unread--hover--after--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-notification-badge	--pf-c-notification-badge--m-attention--Color	#fff
--pf-c-notification-badge--m-attention--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-notification-badge	--pf-c-notification-badge--m-attention--after--BackgroundColor	#c9190b
--pf-c-notification-badge--m-attention--after--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-notification-badge	--pf-c-notification-badge--m-attention--hover--after--BackgroundColor	#a30000
--pf-c-notification-badge--m-attention--hover--after--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-notification-badge	--pf-c-notification-badge__count--MarginLeft	0.25rem
--pf-c-notification-badge__count--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-notification-badge	--pf-c-notification-badge--pf-icon-attention-bell--LineHeight	1.3
--pf-c-notification-badge--pf-icon-attention-bell--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-notification-badge.pf-m-read	--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	--pf-c-notification-badge--after--BorderColor	transparent
--pf-c-notification-badge--after--BorderColor --pf-c-notification-badge--m-read--after--BorderColor transparent
	.pf-c-notification-badge.pf-m-unread	--pf-c-notification-badge--after--BackgroundColor	#06c
--pf-c-notification-badge--after--BackgroundColor --pf-c-notification-badge--m-unread--after--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-notification-badge.pf-m-unread:hover	--pf-c-notification-badge--after--BackgroundColor	#004080
--pf-c-notification-badge--after--BackgroundColor --pf-c-notification-badge--m-unread--hover--after--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-notification-badge.pf-m-attention	--pf-c-notification-badge--after--BackgroundColor	#c9190b
--pf-c-notification-badge--after--BackgroundColor --pf-c-notification-badge--m-attention--after--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-notification-badge.pf-m-attention:hover	--pf-c-notification-badge--after--BackgroundColor	#a30000
--pf-c-notification-badge--after--BackgroundColor --pf-c-notification-badge--m-attention--hover--after--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines