<!-- default badges -->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-indigo">Indigo</span>
<span class="badge badge-purple">Purple</span>
<span class="badge badge-pink">Pink</span>

<!-- default pill badges -->
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
<span class="badge badge-pill badge-indigo">Indigo</span>
<span class="badge badge-pill badge-purple">Purple</span>
<span class="badge badge-pill badge-pink">Pink</span>


<!-- soft badges -->
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-danger">Danger</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-light">Light</span>
<span class="badge badge-soft badge-dark">Dark</span>
<span class="badge badge-soft badge-indigo">Indigo</span>
<span class="badge badge-soft badge-purple">Purple</span>
<span class="badge badge-soft badge-pink">Pink</span>

<!-- soft pill badges -->
<span class="badge badge-soft badge-pill badge-primary">Primary</span>
<span class="badge badge-soft badge-pill badge-secondary">Secondary</span>
<span class="badge badge-soft badge-pill badge-success">Success</span>
<span class="badge badge-soft badge-pill badge-danger">Danger</span>
<span class="badge badge-soft badge-pill badge-warning">Warning</span>
<span class="badge badge-soft badge-pill badge-info">Info</span>
<span class="badge badge-soft badge-pill badge-light">Light</span>
<span class="badge badge-soft badge-pill badge-dark">Dark</span>
<span class="badge badge-soft badge-pill badge-indigo">Indigo</span>
<span class="badge badge-soft badge-pill badge-purple">Purple</span>
<span class="badge badge-soft badge-pill badge-pink">Pink</span>

<!-- button -->
<button type="button" class="btn btn-primary">
	Notifications <span class="badge badge-light">4</span>
</button>

<!-- button : badge absolute right -->
<button type="button" class="btn btn-primary position-relative">
	Notifications <span class="badge badge-danger position-absolute right-0 mt--n4 mr--n4 rounded-circle">7</span>
</button>

<!-- button : badge absolute left -->
<button type="button" class="btn btn-primary position-relative">
	Notifications <span class="badge badge-danger position-absolute left-0 mt--n4 ml--n4 rounded-circle">2</span>
</button>

<!-- button : badge absolute : rounded -->
<button type="button" class="btn btn-secondary btn-sm rounded-circle">
	<i class="fi fi-envelope-2"></i>
	<span class="badge badge-danger position-absolute right-0 mt--n2 mr--n2 rounded-circle">2</span>
</button>


<!-- headings -->
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>