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