Badge

A badge is used to annotate other information like a label or an object name.

Examples

Read

7 24 240 999+

Unread

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


	.pf-c-badge	--pf-c-badge--BorderRadius	30em
--pf-c-badge--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-badge	--pf-c-badge--FontSize	0.75rem
--pf-c-badge--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-badge	--pf-c-badge--FontWeight	700
--pf-c-badge--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-badge	--pf-c-badge--PaddingRight	0.5rem
--pf-c-badge--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-badge	--pf-c-badge--PaddingLeft	0.5rem
--pf-c-badge--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-badge	--pf-c-badge--Color	#151515
--pf-c-badge--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-badge	--pf-c-badge--MinWidth	2rem
--pf-c-badge--MinWidth --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-badge	--pf-c-badge--m-read--BackgroundColor	#f0f0f0
--pf-c-badge--m-read--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-badge	--pf-c-badge--m-read--Color	#151515
--pf-c-badge--m-read--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-badge	--pf-c-badge--m-unread--BackgroundColor	#06c
--pf-c-badge--m-unread--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-badge	--pf-c-badge--m-unread--Color	#fff
--pf-c-badge--m-unread--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-badge.pf-m-read	--pf-c-badge--Color	#151515
--pf-c-badge--Color --pf-c-badge--m-read--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-badge.pf-m-read	--pf-c-badge--BackgroundColor	#f0f0f0
--pf-c-badge--BackgroundColor --pf-c-badge--m-read--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-badge.pf-m-unread	--pf-c-badge--Color	#fff
--pf-c-badge--Color --pf-c-badge--m-unread--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-badge.pf-m-unread	--pf-c-badge--BackgroundColor	#06c
--pf-c-badge--BackgroundColor --pf-c-badge--m-unread--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines