PF Next

Badge Upgrade Examples

Patternfly 3 Badges

Preview

7 24 240 999+
<span class="badge">7</span>
<span class="badge">24</span>
<span class="badge">240</span>
<span class="badge">999+</span>

Patternfly 4 Badges

Preview

7 24 240 999+

7 24 240 999+
<span class="pf-c-badge pf-m-read">
      7
</span>
<span class="pf-c-badge pf-m-read">
      24
</span>
<span class="pf-c-badge pf-m-read">
      240
</span>
<span class="pf-c-badge pf-m-read">
      999+
</span>
<br>
<br>
<span class="pf-c-badge pf-m-unread">
    7
</span>
<span class="pf-c-badge pf-m-unread">
      24
</span>
<span class="pf-c-badge pf-m-unread">
      240
</span>
<span class="pf-c-badge pf-m-unread">
      999+
</span>

Documentation

Overview

These examples highlight the differences in implementing Badges in Patternfly 4 compared with Patternfly 3. When converting PatternFly 3 components to PatternFly 4 components, you must also take into consideration the layouts and sizings that PatternFly 3 utilized from Bootstrap 3.

Usage

PF3 Class Applied To PF4 Class Applied To Outcome
.badge <span> .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.
Main Differences in pf3 Main differences in pf4
Badges have different styles for read and unread to make the state of that badge clearer.