Badge

A badge is used to annotate other information like a label or an object name. Badges are typically used to reflect a count, e.g. number of object, number of events, number of unread, etc.

Examples Documentation CSS Variables

Examples

Read

724240999+

Unread

724240999+

Documentation

Overview

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

Usage

Class	Applied to	Outcome
`.pf-c-badge`	`<span>`	Initiates a badge. Always use with a modifier class.
`.pf-m-read`	`.pf-c-badge`	Applies read badge styling.
`.pf-m-unread`	`.pf-c-badge`	Applies unread badge styling.

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	600
--pf-c-badge--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.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