Badge

A badge is an annotation that displays a numeric value.

Examples

Read

7 24 240 999+

Unread

7 24 240 999+

Disabled

7 24 240 999+

Props

Badge

*required
Name	Type	Default	Description
children	React.ReactNode	''	content rendered inside the Badge
className	string	''	additional classes added to the Badge
isDisabled	boolean	false	Adds styling to the badge to indicate it is disabled
isRead	boolean	false	Adds styling to the badge to indicate it has been read
screenReaderText	string		Text announced by screen readers to indicate the current content/status of the badge.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-badge	--pf-v6-c-badge--BorderColor	transparent
	.pf-v6-c-badge	--pf-v6-c-badge--BorderWidth	1px
--pf-v6-c-badge--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-badge	--pf-v6-c-badge--BorderRadius	999px
--pf-v6-c-badge--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-badge	--pf-v6-c-badge--FontSize	0.75rem
--pf-v6-c-badge--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-badge	--pf-v6-c-badge--FontWeight	500
--pf-v6-c-badge--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-badge	--pf-v6-c-badge--PaddingInlineEnd	0.5rem
--pf-v6-c-badge--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-badge	--pf-v6-c-badge--PaddingInlineStart	0.5rem
--pf-v6-c-badge--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-badge	--pf-v6-c-badge--Color	(In light theme) #151515
--pf-v6-c-badge--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-badge	--pf-v6-c-badge--MinWidth	2rem
--pf-v6-c-badge--MinWidth --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-badge	--pf-v6-c-badge__toggle-icon--MarginInlineStart	0.25rem
--pf-v6-c-badge__toggle-icon--MarginInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-badge	--pf-v6-c-badge__toggle-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-badge__toggle-icon--Color --pf-t--global--icon--color--nonstatus--on-gray--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-badge	--pf-v6-c-badge--m-read--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-badge	--pf-v6-c-badge--m-read--Color	(In light theme) #151515
--pf-v6-c-badge--m-read--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-badge	--pf-v6-c-badge--m-read--BorderColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-badge--m-read--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.pf-v6-c-badge	--pf-v6-c-badge--m-read__toggle-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-badge--m-read__toggle-icon--Color --pf-t--global--icon--color--nonstatus--on-gray--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-badge	--pf-v6-c-badge--m-unread--BackgroundColor	(In light theme) #0066cc
--pf-v6-c-badge--m-unread--BackgroundColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-badge	--pf-v6-c-badge--m-unread--Color	(In light theme) #ffffff
--pf-v6-c-badge--m-unread--Color --pf-t--global--text--color--on-brand--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-badge	--pf-v6-c-badge--m-unread__toggle-icon--Color	(In light theme) #ffffff
--pf-v6-c-badge--m-unread__toggle-icon--Color --pf-t--global--icon--color--on-brand--default --pf-t--global--icon--color--inverse --pf-t--global--icon--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-badge	--pf-v6-c-badge--m-disabled--Color	(In light theme) #4d4d4d
--pf-v6-c-badge--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-badge	--pf-v6-c-badge--m-disabled--BorderColor	(In light theme) #a3a3a3
--pf-v6-c-badge--m-disabled--BorderColor --pf-t--global--border--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-badge	--pf-v6-c-badge--m-disabled--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-badge--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-badge.pf-m-read	--pf-v6-c-badge--BorderColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-badge--BorderColor --pf-v6-c-badge--m-read--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.pf-v6-c-badge.pf-m-read	--pf-v6-c-badge--Color	(In light theme) #151515
--pf-v6-c-badge--Color --pf-v6-c-badge--m-read--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-badge.pf-m-read	--pf-v6-c-badge--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-badge--BackgroundColor --pf-v6-c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-badge.pf-m-read	--pf-v6-c-badge__toggle-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-badge__toggle-icon--Color --pf-v6-c-badge--m-read__toggle-icon--Color --pf-t--global--icon--color--nonstatus--on-gray--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-badge.pf-m-unread	--pf-v6-c-badge--Color	(In light theme) #ffffff
--pf-v6-c-badge--Color --pf-v6-c-badge--m-unread--Color --pf-t--global--text--color--on-brand--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-badge.pf-m-unread	--pf-v6-c-badge--BackgroundColor	(In light theme) #0066cc
--pf-v6-c-badge--BackgroundColor --pf-v6-c-badge--m-unread--BackgroundColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-badge.pf-m-unread	--pf-v6-c-badge__toggle-icon--Color	(In light theme) #ffffff
--pf-v6-c-badge__toggle-icon--Color --pf-v6-c-badge--m-unread__toggle-icon--Color --pf-t--global--icon--color--on-brand--default --pf-t--global--icon--color--inverse --pf-t--global--icon--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-badge.pf-m-disabled	--pf-v6-c-badge--Color	(In light theme) #4d4d4d
--pf-v6-c-badge--Color --pf-v6-c-badge--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-badge.pf-m-disabled	--pf-v6-c-badge--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-badge--BackgroundColor --pf-v6-c-badge--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7

Edit this page on GitHub