Skip to main content
live This is a new website – your feedback will help us to improve it.

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 Labels.

Variants

Default badge

Unread notifications 42

Unread notifications 

<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>