Switch to WilmingtonStatus
Status communicates necessary contextual, point-in-time information in relation to an object such as an account, transaction or deal. An object's status can change independent of a user's actions.
Status relates specifically to an object at a specific point in time. If you need to communicate information related to a user's task, consider the feedback and error guidelines. If you need to communicate progression through a task, consider the progress and loading guidelines.
Visual Treatment
Status is intended to communicate necessary information with the user, do not use it for decoration. Because it's inherently connected to a singular object, status must be displayed on the UI element that represents that object. The visual treatmentn of status should be consistent on a given object. That is, if you use a badge to communicate a pending status, do not use an icon to indicate a complete status.
Color
Status should use semantic colors to draw the user's eye and give them an immediate understanding of the importance of the information.
| Color | Category | Example Usage |
|---|---|---|
| Gray | Inactive | Not started, Disabled, Draft, Scheduled, Removed |
| Green | Positive | Active, High, Sent, Posted, Up-to-date, Published |
| Yellow | Processing | Pending, Scheduled, In progress, In review |
| Red | Negative | In danger, Low, Failed, Canceled, Stuck, Removed |
Use your discretion in choosing when to use color to make statuses more prominent in the visual hierarchy. For example, it may be important to highlight posted transactions in green and failed transactions in red, but less important to highlight pending transactions. In this case, consider using the inactive gray treatment for pending instead of the processing yellow treatment.
Iconography
Iocns may be used to add visual prominence to a status message. Per the iconography guidelines, icons should reinforce the label and be easily understood. Do not use icons that have different connotations elsewhere in the experience to signify status. For example, if the is used in the experience to mean 'refresh', do not use it on a status to mean pending.
Writing Status Messages
Status should always be associated with words, do not rely on semantic colors or icons alone. The language that is used to convey status should be concise and consistent within an experience. Ideally, statuses should be kept to one or two words. Full sentences should have simple structures along the lines of "This object is this adjective". For example, "This package is in review" or "This account is past due".