Statuses

Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.

Default markup

Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the Colors section.

<span class="status status-blue">Blue</span>
<span class="status status-azure">Azure</span>
...

Look at the example below to see how the status works:

Status with dot

You can add a dot to the status to make it more noticeable. To do this, use the .status-dot element inside the .status element.

<span class="status status-blue">
  <span class="status-dot"></span>
  Blue
</span>

Look at the example below to see how the status with a dot works:

Animated dot

You can also animate the dot to make it more noticeable. To do this, use the .status-dot-animated class inside the .status-dot element.

Lite status

Use the lite status to make the status less noticeable. To do this, use the .status-lite class inside the .status element.

Status dots

If you need only dot status, you can use the .status-dot class.

<span class="status-dot status-blue"></span>

Look at the example below to see how the status dots work:

The dots can also be animated. To do this, use the .status-dot-animated class.

<span class="status-dot status-dot-animated status-blue"></span>

The animated status dots can be used in the same way as the regular status dots.

Status indicator

Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, use the .status-indicator-animated class.