<span class="badge text-bg-primary py-1 px-2 text-white rounded-1 fw-medium fs-12">Primary</span>
<span class="badge text-bg-secondary py-1 px-2 text-white rounded-1 fw-medium fs-12">Secondary</span>
<span class="badge text-bg-success py-1 px-2 text-white rounded-1 fw-medium fs-12">Success</span>
<span class="badge text-bg-danger py-1 px-2 text-white rounded-1 fw-medium fs-12">Danger</span>
<span class="badge text-bg-warning py-1 px-2 text-white rounded-1 fw-medium fs-12">Warning</span>
<span class="badge text-bg-info py-1 px-2 text-white rounded-1 fw-medium fs-12">Info</span>
<span class="badge text-bg-light py-1 px-2 text-white rounded-1 fw-medium fs-12">Light</span>
<span class="badge text-bg-dark py-1 px-2 text-white rounded-1 fw-medium fs-12">Dark</span>

<span class="badge bg-opacity-10 bg-primary py-1 px-2 text-primary rounded-1 fw-medium fs-12">Primary</span>
<span class="badge bg-opacity-10 bg-secondary py-1 px-2 text-secondary rounded-1 fw-medium fs-12">Secondary</span>
<span class="badge bg-opacity-10 bg-success py-1 px-2 text-success rounded-1 fw-medium fs-12">Success</span>
<span class="badge bg-opacity-10 bg-danger py-1 px-2 text-danger rounded-1 fw-medium fs-12">Danger</span>
<span class="badge bg-opacity-10 bg-warning py-1 px-2 text-warning rounded-1 fw-medium fs-12">Warning</span>
<span class="badge bg-opacity-10 bg-info py-1 px-2 text-info rounded-1 fw-medium fs-12">Info</span>
<span class="badge bg-opacity-10 bg-light py-1 px-2 text-light rounded-1 fw-medium fs-12">Light</span>
<span class="badge bg-opacity-10 bg-dark py-1 px-2 text-dark rounded-1 fw-medium fs-12">Dark</span>

<button type="button" class="btn bg-primary bg-opacity-10 fw-medium text-primary py-2 px-4 mt-2 me-2">Primary</button>
<button type="button" class="btn bg-secondary bg-opacity-10 fw-medium text-secondary py-2 px-4 mt-2 me-2">Secondary</button>
<button type="button" class="btn bg-success bg-opacity-10 fw-medium text-success py-2 px-4 mt-2 me-2">Success</button>
<button type="button" class="btn bg-danger bg-opacity-10 fw-medium text-danger py-2 px-4 mt-2 me-2">Danger</button>
<button type="button" class="btn bg-warning bg-opacity-10 fw-medium text-warning py-2 px-4 mt-2 me-2">Warning</button>
<button type="button" class="btn bg-info bg-opacity-10 fw-medium text-info py-2 px-4 mt-2 me-2">Info</button>
<button type="button" class="btn bg-light bg-opacity-10 fw-medium text-light py-2 px-4 mt-2 me-2">Light</button>
<button type="button" class="btn bg-dark bg-opacity-10 fw-medium text-dark py-2 px-4 mt-2 me-2">Dark</button>
<button type="button" class="btn bg-link bg-opacity-10 fw-medium text-link py-2 px-4 mt-2 me-2">Link</button>

<span class="badge bg-opacity-10 bg-primary py-1 px-2 text-primary rounded-pill fw-medium fs-12">Primary</span>
<span class="badge bg-opacity-10 bg-secondary py-1 px-2 text-secondary rounded-pill fw-medium fs-12">Secondary</span>
<span class="badge bg-opacity-10 bg-success py-1 px-2 text-success rounded-pill fw-medium fs-12">Success</span>
<span class="badge bg-opacity-10 bg-danger py-1 px-2 text-danger rounded-pill fw-medium fs-12">Danger</span>
<span class="badge bg-opacity-10 bg-warning py-1 px-2 text-warning rounded-pill fw-medium fs-12">Warning</span>
<span class="badge bg-opacity-10 bg-info py-1 px-2 text-info rounded-pill fw-medium fs-12">Info</span>
<span class="badge bg-opacity-10 bg-light py-1 px-2 text-light rounded-pill fw-medium fs-12">Light</span>
<span class="badge bg-opacity-10 bg-dark py-1 px-2 text-dark rounded-pill fw-medium fs-12">Dark</span>

<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-success">New</span></h3>
<h4>Example heading <span class="badge bg-warning">New</span></h4>
<h5>Example heading <span class="badge bg-danger">New</span></h5>
<h6>Example heading <span class="badge bg-info">New</span></h6>

    

<button type="button" class="btn btn-primary fw-medium text-white">
    Notifications <span class="badge text-bg-danger text-white">4</span>
</button>

<button type="button" class="btn btn-primary position-relative fw-medium text-white">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        99+
        <span class="visually-hidden">unread messages</span>
    </span>
</button>

<button type="button" class="btn btn-primary position-relative fw-medium text-white">
    Profile
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
        <span class="visually-hidden">New alerts</span>
    </span>
</button>

<span class="badge text-bg-primary bg-opacity-10 py-1 px-2 text-primary rounded-1 fw-medium fs-12 d-flex align-items-center gap-1 py-3 px-4">
    <i class="ri-layout-grid-fill fs-18"></i>
    <span class="ms-1 fw-medium fs-15">Dashboard</span>
    <span class="ms-1 bg-primary text-white py-1 px-2 rounded-1 fs-14 lh-1 ms-4">4</span>
    <i class="ri-arrow-down-s-line ms-1"></i>
</span>
<span class="badge text-bg-primary py-1 px-2 text-white rounded-1 fw-medium fs-12 d-flex align-items-center gap-1 py-3 px-4 ms-3">
    <i class="ri-layout-grid-fill fs-18"></i>
    <span class="ms-1 fw-medium fs-15">Dashboard</span>
    <span class="ms-1 bg-white bg-opacity-10 text-white py-1 px-2 rounded-1 fs-14 lh-1 ms-4">4</span>
    <i class="ri-arrow-down-s-line ms-1"></i>
</span>