<span class="badge outline-badge-primary"> Primary </span>
<span class="badge outline-badge-info"> Info </span>
<span class="badge outline-badge-success"> Success </span>
<span class="badge outline-badge-secondary"> Secondary </span>
<span class="badge outline-badge-warning"> Warning </span>
<span class="badge outline-badge-danger"> Danger </span>
<span class="badge outline-badge-dark"> Dark </span>

<button type="button" class="btn btn-primary position-relative mt-3 mb-3 ml-2">
    <span><svg> ... </svg> Facebook</span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-info position-relative mt-3 mb-3 ml-2">
    <span>Twitter</span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-secondary position-relative mt-3 mb-3 ml-2">
    <span><svg> ... </svg> </span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-dark mt-3 mb-3 ml-2">
    Notifications <span class="badge badge-light">4</span>
</button>

<span class="badge-chip badge-warning mt-3 mb-3 ml-2 position-relative">
    <img src="assets/img/90x90.jpg" alt="Person" width="96" height="96">
    <span class="text">John Doe</span>
</span>

<span class="badge-chip badge-danger mt-3 mb-3 ml-2">
    <img src="assets/img/90x90.jpg" alt="Person" width="96" height="96">
    <span class="text">John Doe</span>
    <span class="closebtn pl-2" onclick="this.parentElement.style.display='none'">×
    </span>
</span>