<span class="badge outline-badge-primary">اولیه</span>
<span class="badge outline-badge-info">اطلاعات</span>
<span class="badge outline-badge-success">موفقیت</span>
<span class="badge outline-badge-secondary">ثانویه</span>
<span class="badge outline-badge-warning">خطا</span>
<span class="badge outline-badge-danger">خطر</span>
<span class="badge outline-badge-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">مهدی حسینی</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">مهدی حسینی</span>
    <span class="closebtn pl-2" onclick="this.parentElement.style.display='none'">×
    </span>
</span>