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.

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

Rules of Thumb
  • Use the standard set of Status Symbols provided.
  • Only use the provided colors for status.
  • Use the highest color possible if multiple statuses are consolidated. For example, if the statuses of underlying components are green, yellow, and red, the consolidated indicator is red.
  • For a detailed description of how Status Symbols are used within Monitoring Icons, see Icons and Symbols .
  • To learn more about the usage of status colors, see Status System .

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
  • In light theme Status Symbols should have a 1px border set to the inside of the symbol.
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

Asset Status
Asset Version Status
Documentation N/A Available
UI Kit - Dark v7 Available
UI Kit - Light v7 Available
UI Kit - Wireframe v7 Available
Web Component v7 Available
Component Tokens v1 In Progress
Status Key
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel