Badge

A badge is an annotation that displays a numeric value.

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	600
--pf-v6-c-badge--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.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) rgb(255, 255, 255, 0.0000)
--pf-v6-c-badge--m-read--BorderColor --pf-t--global--border--color--high-contrast rgb(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) #707070
--pf-v6-c-badge--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.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) rgb(255, 255, 255, 0.0000)
--pf-v6-c-badge--BorderColor --pf-v6-c-badge--m-read--BorderColor --pf-t--global--border--color--high-contrast rgb(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) #707070
--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--50 #707070
	.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