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.