Skip to main content

Application State

The Application State component indicates the state the entire application is in (such as Live, Exercise, Training, or Development), so that the user does not execute a command on a live asset unintentionally.

Rules of Thumb

Appearance and Behavior

Background

Only use Tag colors when necessary as overuse of colors may reduce efficacy of monitoring icon, classification marking, and notification banner component colors.

Text

Location

Examples

Do: Place the indicator below the application title.
Do: Place the indicator below the application title.
Don’t: Place the indicator below the application menu.
Don’t: Place the indicator below the application menu.
Do: Show all relevant state names if more than one application state is ongoing at the time.
Do: Show all relevant state names if more than one application state is ongoing at the time.
Don’t: Allow text wrapping in the component.
Don’t: Allow text wrapping in the component.
Do: Use short names to avoid overcrowding of the Global Status Bar.
Do: Use short names to avoid overcrowding of the Global Status Bar.
Don’t: Allow other elements of the user interface like the app menu to obscure the Application State.
Don’t: Allow other elements of the user interface like the app menu to obscure the Application State.
Do: Use the application menu to enable state switching when necessary.
Do: Use the application menu to enable state switching when necessary.
Don’t: Implement state switching in the UI without confirming that this functionality is approved by your client or security expert.
Don’t: Implement state switching in the UI without confirming that this functionality is approved by your client or security expert.
Do: Change text color to --color-palette-grey-800 if the background color makes the original text color hard to read.
Do: Change text color to --color-palette-grey-800 if the background color makes the original text color hard to read.
Don’t: Use non-default or non-tag colors for background colors.
Don’t: Use non-default or non-tag colors for background colors.