Badge
Overview#
Badges are static elements used to communicate the status of another element.
Design Guidelines#
Use when#
- To denote the status of an element.
Don't use when#
- The status of an element needs to change on click.
Visual Style#
- Badges should be in sentence case.
- Text should be short and scannable.
- Display inline with the content it is displaying the status of.
- Take into consideration what different colours may imply. (eg. An orange
partially fulfilledtag may have a different meaning from a greypartially fulfilledbadge)- For colour meanings, refer to colour documentation.
Behaviour#
- Use green, yellow, or red when an action needs to be or has been taken, grey for no action necessary.
Editorial#
- Never provide long error or success messages in a badge.
- Use a single word to describe the status of an object.
- Only use two words if you need to describe a complex state. (eg.
partially fulfilled)
Allowed terms#
Follow the Actionable Language documentation for any terms used in badges.
The available badges for general status are:
| Terminology | Use When |
|---|---|
| On | An app or feature is turned ON at the company level. Eg. Queuing is turned on for Company ABC. |
| Off | An app or feature is turned OFF at the company level Eg. Queuing is turned off for Company ABC. |
| Enabled | A second level option is ENABLED within an application or feature. Eg. A location is enabled, a user is enabled. The Queuing - "reason for visit" feature is enabled. |
| Disabled | A second level option is DISABLED within an application or feature. Eg. A location is disabled, a user is disabled. The Queuing - "reason for visit" feature is disabled. |
| Pending | Something is PENDING within an application or feature, meaning something is "waiting". Eg. A database update is scheduled but it has not started. |
| Running | Something is RUNNING, or in progress within an application or feature. Eg. A database update has started but has not yet finished. |
| Failed | Something tried to run but was not successful within an application or feature. Eg. A database update was started but did not complete. |
| Canceled | Something that started running was intentionally stopped within an application or feature. Eg. A database update was started and intentionally stopped by a user. |
| Canceling | Something that started running was intentionally stopped within an application or feature and is still in the process of canceling. Eg. A database update was started and intentionally stopped by a user and the cancel process is still underway. |
| Completed | Something finished successfully within an application or feature. Eg. A database update was started completed successfully or a user completed a task. |
Examples#
Success#
Badge denoting a positive status.
Error#
Badge denoting a negative status.
Information#
Badge denoting a neutral, informative status.
Default#
Badge denoting a neutral state.
Critical warning#
Badge denoting a warning that the user must act on.
Non-critical warning#
Badge denoting a warning that the user may act on.