Badge

Small numerical value or status descriptor for UI elements. Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

Interactive demo

Examples

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

<h3>Example heading <span class="badge badge-primary">New</span></h3>

For notification count or new notification

Unread messages count or new message notification appears close to button or icon.

Used for record count in Tabs

<span class="badge badge-primary">04</span>
<!--Notifications-->
<a href="javascript:void(0);" class="notification" title="Notification"> 
<i class="fal fa-bell"></i> <sup>1</sup>
</a>
 <span class="mx-3"></span> 
<a href="javascript:void(0);" class="notification has-notification" title="Notification">
<i class="fal fa-bell"></i>
</a>

When to use

Can be used to

"Stamp" another piece of UI, such as an Avatar, a text title or inside a button

• When an element needs to be highlighted or two items need to be differentiated from each other.

Should not be used

• Do not use too long labels or whole sentences.

• Avoid numbers longer than 3 digits when possible.