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

<button type="button" class="btn btn-primary"> Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button>

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

<div class="dropdown user-dropdown d-inline-block ,l-5"> <a href="javascript:void(0);" class="user-status user-default dropdown-toggle" title="User" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-user"></i></a>
 <div class="dropdown-menu"> <a class="dropdown-item" href="#" title="">Page 1</a> <a class="dropdown-item" href="#" title="">Page 2</a> <a class="dropdown-item" href="faq.html" title="">Page 3</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.