Badges

Badges are used to classify content using keywords and statuses. Use badges on a screen, asset, or other content to help users search for and find related content or understand statuses.

Best practices

Always be consistent and use labels that are as short as possible while conveying meaning.
Use the colour system to help give badges meaning.
Badge labels should always be written in sentence case.

In progress

Do: Use sentence case

In Progress IN PROGRESS

Don't: Use title case or all caps

How it works

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

Example heading New

<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge. Use the status colours when communicating a status to users.

Primary Secondary Teal Purple Success Danger Warning Info Light Dark

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

Conveying meaning to assistive technologies

Using colour to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the colour is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Links

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Primary Secondary Teal Purple Success Danger Warning Info Light Dark

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-teal">Teal</a>
<a href="#" class="badge badge-purple">Purple</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>