Skip to content
Patternfly Logo

Badge

Examples

Read

7 24 240 999+

Unread

7 24 240 999+

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--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