Badges are a small labelling component that can be used inline with other text or independently.

Default Badges

By default, badges scale to the size of their parent, and use background utilities to set their coloring. Below are some examples of badges being used with heading elements.

Example heading New

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

h1
    | Example heading 
    span.badge.bg-primary New
h2
    | Example heading 
    span.badge.bg-primary New
h3
    | Example heading 
    span.badge.bg-primary New
h4
    | Example heading 
    span.badge.bg-primary New
h5
    | Example heading 
    span.badge.bg-primary New
h6
    | Example heading 
    span.badge.bg-primary New

Colors

The background utilities used in this theme can be utilized to set the background color of a badge. For proper styling, a text utility may be needed for badges with lighter background colors.

Primary Secondary Success Danger Warning Info Light Dark

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

span.badge.bg-primary Primary
span.badge.bg-secondary Secondary
span.badge.bg-success Success
span.badge.bg-danger Danger
span.badge.bg-warning.text-dark Warning
span.badge.bg-info Info
span.badge.bg-light.text-dark Light
span.badge.bg-dark Dark

Pill Badges

The rounded, pill effect for badges can be acheived by simply appending the .badge class with the .rounded-pill border radius utility class.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">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 text-dark">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

span.badge.rounded-pill.bg-primary Primary
span.badge.rounded-pill.bg-secondary Secondary
span.badge.rounded-pill.bg-success Success
span.badge.rounded-pill.bg-danger Danger
span.badge.rounded-pill.bg-warning.text-dark Warning
span.badge.rounded-pill.bg-info Info
span.badge.rounded-pill.bg-light.text-dark Light
span.badge.rounded-pill.bg-dark Dark

Integration

The badge component integrates well with the button component to add notifications or small badge alerts to a clickable zone.

<button class="btn btn-primary" type="button">
    <i class="material-icons leading-icon">notifications_active</i>
    Notifications <span class="badge bg-light text-dark ms-2">4</span>
</button>

button.btn.btn-primary(type='button')
    i.material-icons.leading-icon notifications_active
    | Notifications 
    span.badge.bg-light.text-dark.ms-2 4

Badges

Default Badges

Example heading New