PatternFly

Badge

A badge is used to annotate other information like a label or an object name.

Examples

Read

7 24 240 999+

Unread

7 unread messages 24 unread messages 240 unread messages 999+ unread messages

Documentation

Overview

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

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-badge--pf-v5-c-badge--BorderRadius
30em
.pf-v5-c-badge--pf-v5-c-badge--FontSize
0.75rem
.pf-v5-c-badge--pf-v5-c-badge--FontWeight
700
.pf-v5-c-badge--pf-v5-c-badge--PaddingRight
0.5rem
.pf-v5-c-badge--pf-v5-c-badge--PaddingLeft
0.5rem
.pf-v5-c-badge--pf-v5-c-badge--Color
#151515
.pf-v5-c-badge--pf-v5-c-badge--MinWidth
2rem
.pf-v5-c-badge--pf-v5-c-badge--m-read--BackgroundColor
#f0f0f0
.pf-v5-c-badge--pf-v5-c-badge--m-read--Color
#151515
.pf-v5-c-badge--pf-v5-c-badge--m-unread--BackgroundColor
#06c
.pf-v5-c-badge--pf-v5-c-badge--m-unread--Color
#fff
.pf-v5-c-badge.pf-m-read--pf-v5-c-badge--Color
#151515
.pf-v5-c-badge.pf-m-read--pf-v5-c-badge--BackgroundColor
#f0f0f0
.pf-v5-c-badge.pf-m-unread--pf-v5-c-badge--Color
#fff
.pf-v5-c-badge.pf-m-unread--pf-v5-c-badge--BackgroundColor
#06c

View source on GitHub