State
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"></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"></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"></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"></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"></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"></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"></i>
<span>Unavailable</span>
</div>
</div>
<!-- Stopped -->
<div class="chi-badge -flat -danger">
<div class="chi-badge__content">
<i class="chi-icon icon-circle"></i>
<span>Stopped</span>
</div>
</div>
<!-- Terminated -->
<div class="chi-badge -flat -muted">
<div class="chi-badge__content">
<i class="chi-icon icon-circle"></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"></i>
<span>Unknown</span>
</div>
</div>