Atoms/ Badge

Colors

<div>
    <span class="badge rounded-pill bg-primary">Primary</span>
    <span class="badge rounded-pill bg-secondary text-dark">Secondary</span>
    <span class="badge rounded-pill bg-tertiary">Secondary</span>
    <span class="badge rounded-pill bg-success">Success</span>
    <span class="badge rounded-pill bg-danger">Danger</span>
    <span class="badge rounded-pill bg-warning">Warning</span>
    <span class="badge rounded-pill bg-info">Info</span>
    <hr>
    <span class="badge rounded-pill bg-soft-primary text-primary">Primary</span>
    <span class="badge rounded-pill bg-soft-secondary text-dark">Secondary</span>
    <span class="badge rounded-pill bg-soft-tertiary text-tertiary">Secondary</span>
    <span class="badge rounded-pill bg-soft-success text-success">Success</span>
    <span class="badge rounded-pill bg-soft-danger text-danger">Danger</span>
    <span class="badge rounded-pill bg-soft-warning text-warning">Warning</span>
    <span class="badge rounded-pill bg-soft-info text-info">Info</span>
</div>