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.
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.
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)
When to avoid
Do not use
- to filter content, consider tags
- as a link, consider text links
- to trigger an action, consider buttons
Accessibility
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.