Status

A status is a small icon that shows the current state of an element. Example states are online, offline, and error.

Status documentation

Class names

• component: status
• color: status-neutral, status-primary, status-secondary, status-accent, status-info, status-success, status-warning, status-error
• size: status-xs, status-sm, status-md, status-lg, status-xl

Syntax

<span class="status {MODIFIER}"></span>

Rules

• {MODIFIER} is optional. It can include one color class name and one size class name.
• The user can easily see this small visual indicator.