--- title: Status summary: A status dot is particularly useful when you want to make an interface element more noticeable in limited space. description: Highlight an interface element with a status dot. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## 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. 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. 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, add a `.status-dot-animated` class to the `.status-dot` element. 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, add a `.status-lite` class to the `.status` element. 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. 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. ## 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. ## SCSS variables Use these SCSS variables to customize statuses. The default values are: