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="a-badge -flat -success">
  <div class="a-badge__content">
    <i class="a-icon icon-circle"></i>
    <span>Online</span>
  </div>
</div>
<!-- Away -->
<div class="a-badge -flat -warning">
  <div class="a-badge__content">
    <i class="a-icon icon-circle-clock"></i>
    <span>Away</span>
  </div>
</div>
<!-- Do not disturb -->
<div class="a-badge -flat -danger">
  <div class="a-badge__content">
    <i class="a-icon icon-circle-minus"></i>
    <span>Do not disturb</span>
  </div>
</div>
<!-- Offline -->
<div class="a-badge -flat -muted">
  <div class="a-badge__content">
    <i class="a-icon icon-circle"></i>
    <span>Offline</span>
  </div>
</div>
<!-- Invisible -->
<div class="a-badge -flat -muted">
  <div class="a-badge__content">
    <i class="a-icon icon-circle-outline"></i>
    <span>Invisible</span>
  </div>
</div>

Application states

Running
LoadingProcessing
Unavailable
Stopped
Terminated
Unknown
<!-- Running -->
<div class="a-badge -flat -success">
  <div class="a-badge__content">
    <i class="a-icon icon-circle"></i>
    <span>Running</span>
  </div>
</div>
<!-- Processing -->
<div class="a-badge -flat">
  <div class="a-badge__content">
    <svg class="a-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="a-badge -flat -warning">
  <div class="a-badge__content">
    <i class="a-icon icon-warning"></i>
    <span>Unavailable</span>
  </div>
</div>
<!-- Stopped -->
<div class="a-badge -flat -danger">
  <div class="a-badge__content">
    <i class="a-icon icon-circle"></i>
    <span>Stopped</span>
  </div>
</div>
<!-- Terminated -->
<div class="a-badge -flat -muted">
  <div class="a-badge__content">
    <i class="a-icon icon-circle"></i>
    <span>Terminated</span>
  </div>
</div>
<!-- Unknown -->
<div class="a-badge -flat -muted">
  <div class="a-badge__content">
    <i class="a-icon icon-circle-outline"></i>
    <span>Unknown</span>
  </div>
</div>