Patternfly Logo

Badge

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--pf-c-badge--BorderRadius
30em
.pf-c-badge--pf-c-badge--FontSize
0.75rem
.pf-c-badge--pf-c-badge--FontWeight
700
.pf-c-badge--pf-c-badge--PaddingRight
0.5rem
.pf-c-badge--pf-c-badge--PaddingLeft
0.5rem
.pf-c-badge--pf-c-badge--Color
#151515
.pf-c-badge--pf-c-badge--MinWidth
2rem
.pf-c-badge--pf-c-badge--m-read--BackgroundColor
#f0f0f0
.pf-c-badge--pf-c-badge--m-read--Color
#151515
.pf-c-badge--pf-c-badge--m-unread--BackgroundColor
#06c
.pf-c-badge--pf-c-badge--m-unread--Color
#fff
.pf-c-badge.pf-m-read--pf-c-badge--Color
#151515
.pf-c-badge.pf-m-read--pf-c-badge--BackgroundColor
#f0f0f0
.pf-c-badge.pf-m-unread--pf-c-badge--Color
#fff
.pf-c-badge.pf-m-unread--pf-c-badge--BackgroundColor
#06c

View source on Github