Skip to main content

Status Symbol

The Status Symbol combines color and shape to create a standard and consistent way to indicate the status of a device or feature. When shown in Light theme, the Status Symbols include an additional inner border.

Astro Status Symbols in context of a modem list layout.
Astro Status Symbols in context of a modem list layout.

Rules of Thumb

Place your cursor over any Status Symbol above to see an example.

Status Colors

Status colors are provided for both light and dark theme versions of Astro in Hex, RGB, and CSS Custom Property values.

Dark Theme Status Colors

HexRGBCSSSynonyms
Status Color: Critical #ff3838255,56,56--status-symbol-color-fill-critical-on-darkCritical, form error, alert, emergency, urgent
Status Color: Serious #ffb302255,179,2--status-symbol-color-fill-serious-on-darkSerious, error, warning, needs attention
Status Color: Caution #fce83a252,232,58--status-symbol-color-fill-caution-on-darkCaution, unstable, unsatisfactory
Status Color: Normal #56f00086,240,0--status-symbol-color-fill-normal-on-darkNormal, on, ok, fine, go, satisfactory
Status Color: Standby #2dccff45,204,255--status-symbol-color-fill-standby-on-darkStandby, available, enabled
Status Color: Off #a4abb6158,167,173--status-symbol-color-fill-off-on-darkOff, unavailable, disabled

Light Theme Status Colors

HexRGBCSSSynonyms
Status Color: Critical #ff2a04255,42,4--status-symbol-color-fill-critical-on-lightCritical, form error, alert, emergency, urgent
Status Color: Serious #ffaf3d255,175,61--status-symbol-color-fill-serious-on-lightSerious, error, warning, needs attention
Status Color: Caution #fad800250,216,0--status-symbol-color-fill-caution-on-lightCaution, unstable, unsatisfactory
Status Color: Normal #00e2000,226,0--status-symbol-color-fill-normal-on-lightNormal, on, ok, fine, go, satisfactory
Status Color: Standby #2dccff45,204,255--status-symbol-color-fill-standby-on-lightStandby, available, enabled
Status Color: Off #7b8089123,128,137--status-symbol-color-fill-off-on-lightOff, unavailable, disabled

Light Theme Status Symbol Borders

HexRGBCSSSynonyms
Status Color: Critical #661102102,17,2--status-symbol-color-border-criticalCritical, alert, emergency, urgent
Status Color: Serious #664618102,70,24--status-symbol-color-border-seriousSerious, error, warning, needs attention
Status Color: Caution #645600100,86,0--status-symbol-color-border-cautionCaution, unstable, unsatisfactory
Status Color: Normal #005a000,90,0--status-symbol-color-border-normalNormal, on, ok, fine, go, satisfactory
Status Color: Standby #28576640,87,102--status-symbol-color-border-standbyStandby, available, enabled
Status Color: Off #3c3e4260,62,66--status-symbol-color-border-offOff, unavailable, disabled