tabler.tabler/docs/content/ui/components/statuses.md

---

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

description: Highlight interface elements with status dots.

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.

{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html %}

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.

{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html %}

Animated dot

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

{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html %}

Lite status

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

{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html %}

Status dots

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

{% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %}

The dots can also be animated. To do this, add 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.

{% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %}

Status indicator

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

{% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %}