Badges

Status indicators and counters are not interactive. They are visual components that communicate the status of a list that communicate, for example, the status of a list and the number of items found in it.

Example

New
<span class="badge badge-secondary">New</span>

Contextual variations

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

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</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 color 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 color 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.

Did you find what you’re looking for ? If not, please tell us .