Badge

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

Examples

Read

7 24 240 999+

Unread

724240999+

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

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