--- 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](/ui/base/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. ```html ``` 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 %}