9.8 KiB
title, summary, description
| title | summary | description |
|---|---|---|
| Status | A status dot is particularly useful when you want to make an interface element more noticeable in limited space. | Highlight an interface element with a status dot. |
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 %}