Badges are used to tag content with various kinds of metadata.

Quick look

A couple things to keep in mind when using badges:

  1. They have a fairly narrow scope of use--typically used for marking tabular or results data.
  2. These badges are NOT to be used for toasts. There is a separate composite that deals with notifications.

Try it out

As of right now none of the badges are clickable and are just used to indicate state.

a tag

Code samples

<div class="dqpl-badge-error">
  <div class="dqpl-icon fa fa-ban" aria-label="Error"></div>
  <div class="dqpl-badge-text">error</div>
<div class="dqpl-badge-success">
  <div class="dqpl-icon fa fa-check-circle" aria-label="Success"></div>
  <div class="dqpl-badge-text">complete</div>
<div class="dqpl-badge-warning">
  <div class="dqpl-icon fa fa-warning" aria-label="Warning"></div>
  <div class="dqpl-badge-text">warning</div>
<div class="dqpl-badge-tag">
  <div class="dqpl-icon fa fa-tag" aria-label="Tag"></div>
  <div class="dqpl-badge-text">a tag</div>

For more information on implementation read thewiki.