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