State

A collection of templates built with Badges, Icons, and Spinners for presenting the state of users, applications, and more.

User states

Online

Away

Do not disturb

Offline

Invisible

<!-- Online -->
<div class="chi-badge -flat -success">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle" aria-hidden="true"></i>
    <span>Online</span>
  </div>
</div>
<!-- Away -->
<div class="chi-badge -flat -warning">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle-clock" aria-hidden="true"></i>
    <span>Away</span>
  </div>
</div>
<!-- Do not disturb -->
<div class="chi-badge -flat -danger">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle-minus" aria-hidden="true"></i>
    <span>Do not disturb</span>
  </div>
</div>
<!-- Offline -->
<div class="chi-badge -flat -muted">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle" aria-hidden="true"></i>
    <span>Offline</span>
  </div>
</div>
<!-- Invisible -->
<div class="chi-badge -flat -muted">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle-outline" aria-hidden="true"></i>
    <span>Invisible</span>
  </div>
</div>

Application states

Running

Processing

Unavailable

Stopped

Terminated

Unknown

<!-- Running -->
<div class="chi-badge -flat -success">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle" aria-hidden="true"></i>
    <span>Running</span>
  </div>
</div>
<!-- Processing -->
<div class="chi-badge -flat">
  <div class="chi-badge__content">
    <svg class="chi-spinner -sm" viewBox="0 0 66 66">
      <title>Processing</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
    <span>Processing</span>
  </div>
</div>
<!-- Unavailable -->
<div class="chi-badge -flat -warning">
  <div class="chi-badge__content">
    <i class="chi-icon icon-warning" aria-hidden="true"></i>
    <span>Unavailable</span>
  </div>
</div>
<!-- Stopped -->
<div class="chi-badge -flat -danger">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle" aria-hidden="true"></i>
    <span>Stopped</span>
  </div>
</div>
<!-- Terminated -->
<div class="chi-badge -flat -muted">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle" aria-hidden="true"></i>
    <span>Terminated</span>
  </div>
</div>
<!-- Unknown -->
<div class="chi-badge -flat -muted">
  <div class="chi-badge__content">
    <i class="chi-icon icon-circle-outline" aria-hidden="true"></i>
    <span>Unknown</span>
  </div>
</div>