Blueweb

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.

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




Do’s and Don’ts

Use short and clear messages.

Don’t write long sentences or complicated text

Put the Status close to the thing it talks about

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

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

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.
Mobile
Kiosk
Design status