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+

Documentation

Overview

Always add a modifier class. Never use the class .pf-v6-c-badge on its own.

Usage

Class	Applied to	Outcome
`.pf-v6-c-badge`	`<span>`	Initiates a badge. Always use with a modifier class.
`.pf-m-read`	`.pf-v6-c-badge`	Applies read badge styling.
`.pf-m-unread`	`.pf-v6-c-badge`	Applies unread badge styling.
`.pf-m-disabled`	`.pf-v6-c-badge`	Applies disabled badge styling. For use when a badge is used in a disabled element.

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__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--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