Status indicators

A small dot that communicates state. Use the semantic class (on, pending, off, disabled, expired, suspended) so the color stays consistent with the rest of the CP. Note that off, suspended, and expired are distinct element statuses that happen to share the same muted fill — they aren't interchangeable.

Live Pending Expired Disabled

<span class="status on"></span> Live
<span class="status pending"></span> Pending
<span class="status expired"></span> Expired
<span class="status disabled"></span> Disabled

Note

Color aliases. Beyond the semantic classes, Craft accepts named colors (green, amber, sky, violet, rose…) for custom element statuses — e.g. <span class="status teal">. Element types can define their own status set this way.