Badges

CSS file

Badges hold small amounts of information and to flag new or important content.

<span class="sba-c-badge">5</span>
<span class="sba-c-badge">Badge label</span>
<span class="sba-c-badge sba-u-font-size--base">Badge label</span>
<span class="sba-c-badge sba-c-badge--generic">Badge label</span>

Modifier: sba-c-badge--info

Use for providing neutral information.

<span class="sba-c-badge sba-c-badge--info">5</span>
<span class="sba-c-badge sba-c-badge--info">Badge label</span>
<span class="sba-c-badge sba-c-badge--info sba-u-font-size--base">Badge label</span>
<span class="sba-c-badge sba-c-badge--info sba-c-badge--generic"></span>

Modifier: sba-c-badge--info-alt

Use for providing neutral information, for use on darker backgrounds.

<span class="sba-c-badge sba-c-badge--info-alt">5</span>
<span class="sba-c-badge sba-c-badge--info-alt">Badge label</span>
<span class="sba-c-badge sba-c-badge--info-alt sba-u-font-size--base">Badge label</span>
<span class="sba-c-badge sba-c-badge--info-alt sba-c-badge--generic"></span>

Modifier: sba-c-badge--warn

Provide a warning.

<span class="sba-c-badge sba-c-badge--warn">5</span>
  <span class="sba-c-badge sba-c-badge--warn">Badge label</span>
  <span class="sba-c-badge sba-c-badge--warn sba-u-font-size--base">Badge label</span>
<span class="sba-c-badge sba-c-badge--warn sba-c-badge--generic"></span>

Modifier: sba-c-badge--alert

For when an error occurs or to indicate something potentially destructive.

<span class="sba-c-badge sba-c-badge--alert">5</span>
  <span class="sba-c-badge sba-c-badge--alert">Badge label</span>
  <span class="sba-c-badge sba-c-badge--alert sba-u-font-size--base">Badge label</span>
<span class="sba-c-badge sba-c-badge--alert sba-c-badge--generic"></span>

Modifier: sba-c-badge--success

For when you need to indicate success or completion.

<span class="sba-c-badge sba-c-badge--success">5</span>
<span class="sba-c-badge sba-c-badge--success">Badge label</span>
<span class="sba-c-badge sba-c-badge--success sba-u-font-size--base">Badge label</span>
<span class="sba-c-badge sba-c-badge--success sba-c-badge--generic"></span>

When to use

• To draw attention to new or important content on a page that might otherwise be missed.
• To filter results with one or more tags.
• To indicate the number of new or unread items within a container. For example, to indicate the number of unread notifications.
• To provide context to a heading that might otherwise not be understood upon a glance

When to considers something else

• When users are likely to confuse a badge with a button. For example, when the badge appears in the same area of the page as buttons.
• To call attention to new or updated content, consider changing the background color of the object itself or experiment with changing the font weight.
• When users already expect content to be updated frequently. For example, on a site dedicated to breaking news. In this case placing the new content at the top may be enough.

Accessibility

When badges are used to call out new content that is dynamically loaded onto a page, be sure to use ARIA live regions to alert screen readers of the change.