Design Guide – v. 8.0.1

Badge

Badges are small rectangular boxes which can convey a message and or state with their text and color.

Overview

Use class .badge along with .badge-{color} to display the badge of your choosing.

Badge Default

Badge Inactive

Badge Warning

HTML

1
2
3

<p>Badge <span class="badge badge-default">Default</span></p>
<p>Badge <span class="badge badge-inactive">Inactive</span></p>
<p>Badge <span class="badge badge-warning">Warning</span></p>

Badges with numbers

Badges are often used with numbers. Use .badge-number when a badge suited for use with numbers is desired.

Badge 1

Badge 8

Badge 100

HTML

1
2
3

<p>Badge <span class="badge badge-default badge-number">1</span></p>
<p>Badge <span class="badge badge-inactive badge-number">8</span></p>
<p>Badge <span class="badge badge-warning badge-number">100</span></p>