0% Complete

Status

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

#

Status colors

Primary Secondary Success Warning Danger Info Light Dark Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
#

Status with dot

Set the style prop to dot to change status mode to circle shape.

Primary Secondary Success Warning Danger Info Light Dark Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
#

Lite status

Primary Secondary Success Warning Danger Info Light Dark Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
#

Status with animated dots

Set the animated prop to change status mode to animated.

Primary Secondary Success Warning Danger Info Light Dark Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
#

Lite status with animated dots

Primary Secondary Success Warning Danger Info Light Dark Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan