Badges

Purpose

Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.

Default

Use to highlight new or updated items with a simple grey numeric, or blue button-like badge.

Grey badge:

Inbox 42 unread emails

Blue button-like badge:

Inbox 42 unread emails

Source code

Grey badge:

<p><a href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>

Blue button-like badge:

<p><a class="btn btn-primary" href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>

Self collapsing badges

Use when there are no new or unread items. Badges simply collapse (via CSS :empty selector).

No content inside badge:

Inbox

Source code

No content inside badge

<p><a href="#">Inbox <span class="badge"></span></a></p>

Reference

Web Experience Toolkit Style Guide - Badges