# Status
> A status dot is particularly useful when you want to make an interface element more noticeable in limited space.
Highlight the state of an element with a small status badge. Add colors, dots, and animations to make statuses easy to scan.
Source: https://docs.tabler.io/ui/components/status
---
## 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.
```html
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
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.
```html
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.
```html
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
```
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.
```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.
```html
```
## Accessibility
- A status dot is decoration. The state has to be in text next to it - a screen reader ignores a colored circle, and so does anyone who cannot tell the colors apart.
- Do not use red and green alone to separate "down" from "up". Pair the color with a word, an icon, or a shape.
- An animated dot repeats forever. Keep it for a state that really is live, and respect `prefers-reduced-motion` in your own CSS if you add more motion.
- When a status changes while the page is open, announce it from a live region elsewhere rather than making the dot itself one.
## SCSS variables
Use these SCSS variables to customize statuses. The default values are:
```scss
$status-dot-size: 0.5rem;
$status-height: 1.5rem;
$status-icon-size: $icon-size;
$status-padding-y: 0.25rem;
$status-padding-x: 0.75rem;
$status-gap: 0.5rem;
$status-indicator-size: 2.5rem;
$status-circle-size: 0.75rem;
```
_Source: `core/scss/_variables.scss`_