Status labels
Status labels communicate a level of severity or status of an object to users.
Information
Success
Warning
Error
Neutral
Show code Hide code
Usage
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.
Guidance
Do
- 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.
Don't
- use status labels to filter content, consider tags
- use status labels as a link, consider text links
- use status labels to trigger an action, consider buttons
Types of status
Status labels are styled according to their purpose:
- 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)
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.