Basic Example #

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example

Example heading New

<h1>Example heading <span class="badge badge-sa-dark">New</span></h1>
<h2>Example heading <span class="badge badge-sa-dark">New</span></h2>
<h3>Example heading <span class="badge badge-sa-dark">New</span></h3>
<h4>Example heading <span class="badge badge-sa-dark">New</span></h4>
<h5>Example heading <span class="badge badge-sa-dark">New</span></h5>
<h6>Example heading <span class="badge badge-sa-dark">New</span></h6>

Buttons #

Badges can be used as part of links or buttons to provide a counter.

Example

<button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-sa-dark">4</span>
</button>

Positioned #

Use utilities to modify a .badge and position it in the corner of a link or button.

Example

<button type="button" class="btn btn-primary position-relative">
    Inbox<span
        class="
            position-absolute
            top-0
            start-100
            translate-middle
            badge badge-sa-dark badge-sa-pill
        "
        >99+ <span class="visually-hidden">unread messages</span></span
    >
</button>

You can also replace the .badge class with a few more utilities without a count for a more generic indicator.

Example

<button type="button" class="btn btn-primary position-relative">
    Profile<span
        class="
            position-absolute
            top-0
            start-100
            translate-middle
            p-3
            badge badge-sa-dark badge-sa-pill
        "
        ><span class="visually-hidden">New alerts</span></span
    >
</button>

Contextual Variations #

Add any of the below mentioned modifier classes to change the appearance of a badge.

Example

Primary Secondary Success Danger Warning Info Light Dark

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

Pill Badges #

Use the .badge-sa-pill modifier class to make badges more rounded.

Example

Primary Secondary Success Danger Warning Info Light Dark

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