tabler/docs/ui/components/statuses.mdx

---
title: Statuses
description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
---

## Default markup

```html example vertical height="7rem"
<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>
```

```html
<span class="status status-blue">Blue</span>
<span class="status status-azure">Azure</span>
...
```

## Status with dot

```html example code vertical height="7rem"
<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>
```

### Animated dot

```html example code vertical height="7rem"
<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>
```

## Lite status

```html example code vertical height="7rem"
<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>
```

## Status dots

```html code example centered separated height="7rem"
<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>
```

### Animated dots

```html code example centered separated height="7rem"
<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>
```

## Status indicator

```html code example vertical centered height="7rem"
<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>
```