HTML

Badge

ExamplesDocumentationCSS Variables

Examples

Read badge

7 24 240 999+
Copied to clipboard

Unread badge

7 24 240 999+
Copied to clipboard

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--BackgroundColorc_badge_BackgroundColor#06c
--pf-c-badge--BorderRadiusc_badge_BorderRadius30em
--pf-c-badge--Colorc_badge_Color#fff
--pf-c-badge--FontSizec_badge_FontSize0.75rem
--pf-c-badge--FontWeightc_badge_FontWeight600
--pf-c-badge--MinWidthc_badge_MinWidth2rem
--pf-c-badge--PaddingLeftc_badge_PaddingLeft0.5rem
--pf-c-badge--PaddingRightc_badge_PaddingRight0.5rem
--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