Badge

A badge is an annotation that displays a numeric value.

Examples

Read

7 24 240 999+

Unread

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

Disabled

7 24 240 999+

Documentation

Overview

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

Usage

Class
Applied to
Outcome
.pf-v6-c-badge
<span>
Initiates a badge. Always use with a modifier class.
.pf-m-read
.pf-v6-c-badge
Applies read badge styling.
.pf-m-unread
.pf-v6-c-badge
Applies unread badge styling.
.pf-m-disabled
.pf-v6-c-badge
Applies disabled badge styling. For use when a badge is used in a disabled element.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-badge--pf-v6-c-badge--BorderColor
transparent
.pf-v6-c-badge--pf-v6-c-badge--BorderWidth
1px
.pf-v6-c-badge--pf-v6-c-badge--BorderRadius
999px
.pf-v6-c-badge--pf-v6-c-badge--FontSize
0.75rem
.pf-v6-c-badge--pf-v6-c-badge--FontWeight
500
.pf-v6-c-badge--pf-v6-c-badge--PaddingInlineEnd
0.5rem
.pf-v6-c-badge--pf-v6-c-badge--PaddingInlineStart
0.5rem
.pf-v6-c-badge--pf-v6-c-badge--Color
(In light theme) #151515
.pf-v6-c-badge--pf-v6-c-badge--MinWidth
2rem
.pf-v6-c-badge--pf-v6-c-badge__toggle-icon--MarginInlineStart
0.25rem
.pf-v6-c-badge--pf-v6-c-badge__toggle-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-badge--pf-v6-c-badge--m-read--BackgroundColor
(In light theme) #e0e0e0
.pf-v6-c-badge--pf-v6-c-badge--m-read--Color
(In light theme) #151515
.pf-v6-c-badge--pf-v6-c-badge--m-read__toggle-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-badge--pf-v6-c-badge--m-unread--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-badge--pf-v6-c-badge--m-unread--Color
(In light theme) #ffffff
.pf-v6-c-badge--pf-v6-c-badge--m-unread__toggle-icon--Color
(In light theme) #ffffff
.pf-v6-c-badge--pf-v6-c-badge--m-disabled--Color
(In light theme) #4d4d4d
.pf-v6-c-badge--pf-v6-c-badge--m-disabled--BorderColor
(In light theme) #a3a3a3
.pf-v6-c-badge--pf-v6-c-badge--m-disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-badge.pf-m-read--pf-v6-c-badge--Color
(In light theme) #151515
.pf-v6-c-badge.pf-m-read--pf-v6-c-badge--BackgroundColor
(In light theme) #e0e0e0
.pf-v6-c-badge.pf-m-read--pf-v6-c-badge__toggle-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-badge.pf-m-unread--pf-v6-c-badge--Color
(In light theme) #ffffff
.pf-v6-c-badge.pf-m-unread--pf-v6-c-badge--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-badge.pf-m-unread--pf-v6-c-badge__toggle-icon--Color
(In light theme) #ffffff
.pf-v6-c-badge.pf-m-disabled--pf-v6-c-badge--Color
(In light theme) #4d4d4d
.pf-v6-c-badge.pf-m-disabled--pf-v6-c-badge--BackgroundColor
(In light theme) #c7c7c7
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.