@tabler/core

--- 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](/docs/ui/base/colors) section. ```html Blue Azure ... ``` Look at the example below to see how the status works: ```html example centered separated columns={2} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## 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. ```html Blue ``` Look at the example below to see how the status with a dot works: ```html example centered separated columns={2} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ### 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. ```html example centered separated columns={2} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Lite status Use the lite status to make the status less noticeable. To do this, use the `.status-lite` class inside the `.status` element. ```html example centered separated columns={2} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Status dots If you need only dot status, you can use the `.status-dot` class. ```html ``` Look at the example below to see how the status dots work: ```html example centered separated ``` The dots can also be animated. To do this, use the `.status-dot-animated` class. ```html ``` The animated status dots can be used in the same way as the regular status dots. ```html example centered separated ``` ## 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. ```html example centered separated columns={1} ```