Skip to main content

Badge

Overview

Use the .bsk-badge class to highlight a count, such as items needing further attention. An empty badge will automatically collapse and be hidden.

Badges are only intended for numbers. For more general purposes, use Label’s.

Variants

Default badge

<p><a href="#">Unread notifications <span class="bsk-badge">42</span></a></p>
<!-- Empty badges automatically hide -->
<p><a href="#">Unread notifications <span class="bsk-badge"></span></a></p>

Sizes

Badges will scale with their parent element.

<p><button class="bsk-btn bsk-btn-default bsk-btn-sm" type="button">Items <span class="bsk-badge">4</span></button></p>
<p><button class="bsk-btn bsk-btn-default" type="button">Items <span class="bsk-badge">4</span></button></p>
<p><button class="bsk-btn bsk-btn-default bsk-btn-lg" type="button">Items <span class="bsk-badge">4</span></button></p>