HTML

Badge

ExamplesDocumentationCSS Variables

Examples

Read

724240999+

Unread

724240999+

Documentation

Overview

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

Usage

ClassApplied toOutcome
.pf-c-badge<span>Initiates a badge. Always use with a modifier class.
.pf-m-read.pf-c-badgeApplies read badge styling.
.pf-m-unread.pf-c-badgeApplies unread badge styling.

CSS Variables

--pf-c-badge--BackgroundColorc_badge_BackgroundColor
#06c
--pf-c-badge--BorderRadiusc_badge_BorderRadius
30em
--pf-c-badge--Colorc_badge_Color
#fff
--pf-c-badge--FontSizec_badge_FontSize
0.75rem
--pf-c-badge--FontWeightc_badge_FontWeight
700
--pf-c-badge--m-read--BackgroundColorc_badge_m_read_BackgroundColor
#ededed
--pf-c-badge--m-read--Colorc_badge_m_read_Color
#151515
--pf-c-badge--m-unread--BackgroundColorc_badge_m_unread_BackgroundColor
#06c
--pf-c-badge--m-unread--Colorc_badge_m_unread_Color
#fff
--pf-c-badge--MinWidthc_badge_MinWidth
2rem
--pf-c-badge--PaddingLeftc_badge_PaddingLeft
0.5rem
--pf-c-badge--PaddingRightc_badge_PaddingRight
0.5rem