This is an open space for collaborating on a status label pattern. To join in the conversation please add a comment below.
Overview
Status labels communicate a level of severity or status of an object to users.
When to use status labels
Use to indicate a desired status to users or provide a state that requires attention. Status labels stand out from other content to draw a users attention to important content.
Types of status labels
- Information - Use when the status is informative or new and also has a neutral meaning (ie. new, coming soon)
- Success - Use to communicate a successful or positive status (ie. available, approved, completed etc)
- Warning - Use to communicate when action is required or to avoid incurring an impending error (ie. missing information, expiring soon etc)
- Error - Use to communicate an issue or failure that needs resolving (ie. expired, failed, cancelled etc)
- Neutral - Use when a status is not available or does not fall into a state above (ie. inactive, not available, not provided etc)
Interaction Design & Usability Research
- Place status labels as close to the element as possible to strengthen its connection
- Use clear labels with short, scannable text (single words where possible)
- Use adjectives rather than verbs so the user doesn’t think that clicking them will perform an action.
