# Badge

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#badge-wrapper)

## Examples

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

<div align="left"><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZMPJt3xCWnf4Sw9CUH%2F-MZMT6pEY-kd4Jt1bYf_%2Fimage.png?alt=media&#x26;token=3efae17f-1a70-4f6b-b510-c6b244a25163" alt=""></div>

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

<div align="left"><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZMPJt3xCWnf4Sw9CUH%2F-MZMUc0P3CXh6dDxK0sn%2Fimage.png?alt=media&#x26;token=c59210ca-46f4-400a-8d7e-614e6a56be28" alt="Used for record count in Tabs"></div>

{% code overflow="wrap" %}

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

{% endcode %}

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