Badge

Overview

• Back to top

• Link to section

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

Variants

• Back to top

• Link to section

Default badge

• Live

• Added in version 0.1.0

• Back to top

• Link to section

<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

• Back to top

• Link to section

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>