Status

A status dot is particularly useful when you want to make an interface element more noticeable in limited space.

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

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

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.

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

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.

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

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

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

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

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

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

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

<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

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.

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

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:

$status-dot-size: 0.5rem;
$status-height: 1.5rem;
$status-icon-size: $icon-size;
$status-padding-y: 0.25rem;
$status-padding-x: 0.75rem;
$status-gap: 0.5rem;
$status-indicator-size: 2.5rem;
$status-circle-size: 0.75rem;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

status componentContainer element, a label with a marker
status-dot partSmall dot marker
status-indicator partLarger marker, usually on its own
status-lite styleTransparent background, keeps only the marker and the text
status-indicator-circle styleSolid circle inside the indicator
status-dot-animated behaviorPulsing dot, for a live state
status-indicator-animated behaviorPulsing indicator
status-{color} colorAny base color, for example status-green or status-danger
Badge

Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.

On this page

130 sleek illustrations for your startup's visual identity.