tabler/docs/content/ui/components/status.mdx

---
title: Status
summary: A status dot is particularly useful when you want to make an interface element more noticeable in limited space.
description: Highlight the state of an element with a small status badge. Add colors, dots, and animations to make statuses easy to scan.
related: [/ui/components/badge]
source: core/scss/ui/_status.scss
classnames:
  component:
    - class: status
      desc: Container element, a label with a marker
  part:
    - class: status-dot
      desc: Small dot marker
    - class: status-indicator
      desc: Larger marker, usually on its own
  style:
    - class: status-lite
      desc: Transparent background, keeps only the marker and the text
    - class: status-indicator-circle
      desc: Solid circle inside the indicator
  behavior:
    - class: status-dot-animated
      desc: Pulsing dot, for a live state
    - class: status-indicator-animated
      desc: Pulsing indicator
  color:
    - class: status-{color}
      desc: Any base color, for example status-green or status-danger
---
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.

<Example centered>
<span class="status status-blue">Blue</span>
<span class="status status-azure">Azure</span>
<span class="status status-indigo">Indigo</span>
<span class="status status-purple">Purple</span>
<span class="status status-pink">Pink</span>
<span class="status status-red">Red</span>
<span class="status status-orange">Orange</span>
<span class="status status-yellow">Yellow</span>
<span class="status status-lime">Lime</span>
<span class="status status-green">Green</span>
<span class="status status-teal">Teal</span>
<span class="status status-cyan">Cyan</span>
</Example>


## 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.

<Example centered>
<span class="status status-blue"> <span class="status-dot"></span> Blue </span>
<span class="status status-azure"> <span class="status-dot"></span> Azure </span>
<span class="status status-indigo"> <span class="status-dot"></span> Indigo </span>
<span class="status status-purple"> <span class="status-dot"></span> Purple </span>
<span class="status status-pink"> <span class="status-dot"></span> Pink </span>
<span class="status status-red"> <span class="status-dot"></span> Red </span>
<span class="status status-orange"> <span class="status-dot"></span> Orange </span>
<span class="status status-yellow"> <span class="status-dot"></span> Yellow </span>
<span class="status status-lime"> <span class="status-dot"></span> Lime </span>
<span class="status status-green"> <span class="status-dot"></span> Green </span>
<span class="status status-teal"> <span class="status-dot"></span> Teal </span>
<span class="status status-cyan"> <span class="status-dot"></span> Cyan </span>
</Example>

### 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.

<Example centered>
<span class="status status-blue"> <span class="status-dot status-dot-animated"></span> Blue </span>
<span class="status status-azure"> <span class="status-dot status-dot-animated"></span> Azure </span>
<span class="status status-indigo"> <span class="status-dot status-dot-animated"></span> Indigo </span>
<span class="status status-purple"> <span class="status-dot status-dot-animated"></span> Purple </span>
<span class="status status-pink"> <span class="status-dot status-dot-animated"></span> Pink </span>
<span class="status status-red"> <span class="status-dot status-dot-animated"></span> Red </span>
<span class="status status-orange"> <span class="status-dot status-dot-animated"></span> Orange </span>
<span class="status status-yellow"> <span class="status-dot status-dot-animated"></span> Yellow </span>
<span class="status status-lime"> <span class="status-dot status-dot-animated"></span> Lime </span>
<span class="status status-green"> <span class="status-dot status-dot-animated"></span> Green </span>
<span class="status status-teal"> <span class="status-dot status-dot-animated"></span> Teal </span>
<span class="status status-cyan"> <span class="status-dot status-dot-animated"></span> Cyan </span>
</Example>

## Lite status

Use the lite status to make the status less noticeable. To do this, add a `.status-lite` class to the `.status` element.

<Example centered>
<span class="status status-blue status-lite"> <span class="status-dot"></span> Blue </span>
<span class="status status-azure status-lite"> <span class="status-dot"></span> Azure </span>
<span class="status status-indigo status-lite"> <span class="status-dot"></span> Indigo </span>
<span class="status status-purple status-lite"> <span class="status-dot"></span> Purple </span>
<span class="status status-pink status-lite"> <span class="status-dot"></span> Pink </span>
<span class="status status-red status-lite"> <span class="status-dot"></span> Red </span>
<span class="status status-orange status-lite"> <span class="status-dot"></span> Orange </span>
<span class="status status-yellow status-lite"> <span class="status-dot"></span> Yellow </span>
<span class="status status-lime status-lite"> <span class="status-dot"></span> Lime </span>
<span class="status status-green status-lite"> <span class="status-dot"></span> Green </span>
<span class="status status-teal status-lite"> <span class="status-dot"></span> Teal </span>
<span class="status status-cyan status-lite"> <span class="status-dot"></span> Cyan </span>
</Example>

## Status dots

If you need only dot status, you can use the `.status-dot` class.

<Example centered>
<span class="status-dot status-blue"></span>
<span class="status-dot status-azure"></span>
<span class="status-dot status-indigo"></span>
<span class="status-dot status-purple"></span>
<span class="status-dot status-pink"></span>
<span class="status-dot status-red"></span>
<span class="status-dot status-orange"></span>
<span class="status-dot status-yellow"></span>
<span class="status-dot status-lime"></span>
<span class="status-dot status-green"></span>
<span class="status-dot status-teal"></span>
<span class="status-dot status-cyan"></span>
</Example>

The dots can also be animated. To do this, add the `.status-dot-animated` class.

```html
<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.

<Example centered>
<span class="status-dot status-dot-animated status-blue"></span>
<span class="status-dot status-dot-animated status-azure"></span>
<span class="status-dot status-dot-animated status-indigo"></span>
<span class="status-dot status-dot-animated status-purple"></span>
<span class="status-dot status-dot-animated status-pink"></span>
<span class="status-dot status-dot-animated status-red"></span>
<span class="status-dot status-dot-animated status-orange"></span>
<span class="status-dot status-dot-animated status-yellow"></span>
<span class="status-dot status-dot-animated status-lime"></span>
<span class="status-dot status-dot-animated status-green"></span>
<span class="status-dot status-dot-animated status-teal"></span>
<span class="status-dot status-dot-animated status-cyan"></span>
</Example>

## 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.

<Example centered>
<span class="status-indicator status-blue status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-azure status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-indigo status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-purple status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-pink status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-red status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-orange status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-yellow status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-lime status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-green status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-teal status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
<span class="status-indicator status-cyan status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
</span>
</Example>

## 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:

<CodeDocs name="status-variables" file="core/scss/_variables.scss" />