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