Statuses

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

Default markup

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

Status with dot

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

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

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

<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

<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

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