package.docs.components.statuses.mdx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of core Show documentation

Premium and Open Source dashboard template with responsive and high quality UI.

The newest version!

---
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"
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
```

```html
Blue
Azure
...
```

## Status with dot

```html example code vertical height="7rem"

  
  Blue


  
  Azure


  
  Indigo


  
  Purple


  
  Pink


  
  Red


  
  Orange


  
  Yellow


  
  Lime


  
  Green


  
  Teal


  
  Cyan

```

### Animated dot

```html example code vertical height="7rem"

  
  Blue


  
  Azure


  
  Indigo


  
  Purple


  
  Pink


  
  Red


  
  Orange


  
  Yellow


  
  Lime


  
  Green


  
  Teal


  
  Cyan

```

## Lite status

```html example code vertical height="7rem"

  
  Blue


  
  Azure


  
  Indigo


  
  Purple


  
  Pink


  
  Red


  
  Orange


  
  Yellow


  
  Lime


  
  Green


  
  Teal


  
  Cyan

```

## Status dots

```html code example centered separated height="7rem"












```

### Animated dots

```html code example centered separated height="7rem"












```

## Status indicator

```html code example vertical centered height="7rem"

  
  
  


  
  
  


  
  
  


  
  
  


  
  
  


  
  
  


  
  
  


  
  
  


  
  
  


  
  
  


  
  
  


  
  
  

```