Use lozenges to highlight an item's status so it can be recognized quickly. Lozenges are either 'subtle' or 'bold' and use color to indicate meaning, which users will learn and recognize across products. Use subtle lozenges by default and in instances where they may dominate the screen, such as in long tables with a lot of lozenges. Reserve bold lozenges for sparse but important information: items like a pull request status or JIRA issue statuses.
Using the color system can help guide the usage for lozenges, and help keep a consistent visual language.
- For tallies or counts, use badges instead.
- To visually label UI objects, use tags.
|DEFAULT||DEFAULT||Grey||Use for a general status or state.||
|Success||Success||Green||Use to celebrate a success.||
|Removed||Removed||Red||Indicates items that are problematic or removed.||
|In progress||In progress||Blue||For items that are in progress or that are current.||
|New||New||Purple||Items in a new, created, or help state.||
|Moved||Moved||Yellow||Items that require attention.||
The lozenges can be up to 196px wide. When the lozenge text exceeds this maximum width, the text is truncated with an ellipsis.
You can add tooltips so that hovering over lozenges to reveals more information. The tooltip content moves to different sides of the lozenge depending how it is being viewed. When writing tooltips, be short and concise and follow the ADG writing guidelines.