Status

Informs the user about a flight status.

 

status

How to use

Use a Status to show the current state of something, like a process, a task, or a system. It helps users understand what is happening, quickly and clearly. A Status has an icon and a short text (for example: “Delayed” or “On time”).

Place the Status near the element it describes. Use it to help users know what’s going on and what they might need to do next.

usage

Types

There are 4 types of Status. Each type has a different color and icon, and shows a different kind of message

Information

Information

Shows something neutral or in progress.

Positive

Positive

Shows something good or finished.

Negative

Negative

Shows a problem or something that failed.

Warning

Warning

Shows something that needs attention.

Do’s and Don’ts

Do

Use short and clear messages.

Don't

Don’t write long sentences or complicated text

 

Do

Put the Status close to the thing it talks about

Don't

Don’t place the Status far from the element it refers to

 

Do

Use plain text instead of a Status component if the information is static

Don't

Don't use Status components to highlight static information

 

Accessibility

  • If the Status can change automatically, make sure it is updated in the code so that screen readers can announce the change.
  • If the Status gives important information (like “Flight cancelled”), make sure it is easily reachable by keyboard and announced if needed.

Content

  • Keep the message short and easy to read.
  • Use 1 to 3 simple words (like “In progress”, “Completed”).
  • Use normal sentence case (only the first letter in uppercase).
  • Don’t use dots or punctuation at the end.
  • Don’t write complex instructions inside a Status.

Availability

Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.

Blueweb

Mobile

Kiosk

Design status

Ready