Badges

Badges are labels that inform users about some aspect of the data, such as the count of related items.

On this page:

Best Practices

Badges are used for information such as:

  • Use them to display a piece of data’s related quality, such as a number of notifications.
  • Badges take their size from the parent element.
  • Keep the text in them short and simple.

Usage

PTA OMV Habitual Text Running Almost Full 5 4 Messages

PTA OMV Habitual Text Running Almost Full 5 4 Messages 

<p class="h4">
  <span class="badge badge-primary">PTA</span>
  <span class="badge badge-secondary">OMV</span>
  <span class="badge badge-accent">Habitual</span>
  <span class="badge badge-ui">Text</span>
  <span class="badge badge-success">Running</span>
  <span class="badge badge-warning">Almost Full</span>
  <span class="badge badge-danger">5</span>
  <span class="badge badge-info">4 Messages</span>
</p>
<p>
  <span class="badge badge-primary">PTA</span>
  <span class="badge badge-secondary">OMV</span>
  <span class="badge badge-accent">Habitual</span>
  <span class="badge badge-ui">Text</span>
  <span class="badge badge-success">Running</span>
  <span class="badge badge-warning">Almost Full</span>
  <span class="badge badge-danger">5</span>
  <span class="badge badge-info">4 Messages</span>
</p>

Resources

Previous page
Next page