Lozenges

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.
An example of lozenges in an interface

Examples

Subtle Bold Color Description Uses
DEFAULT DEFAULT Grey Use for a general status or state.
  • To do
  • Unavailable
  • Minor
  • Not started
Success Success Green Use to celebrate a success.
  • Available
  • Done
  • Approved
  • Resolved
  • Added
Removed Removed Red Indicates items that are problematic or removed.
  • Errors
  • Declined
  • Failed
  • Removed
  • Critical
In progress In progress Blue For items that are in progress or that are current.
  • In progress
  • Open
  • Modified
New New Purple Items in a new, created, or help state.
  • New
  • Information
  • Help
Moved Moved Yellow Items that require attention.
  • Busy
  • Blocked
  • Missing
  • Warning

Overflow

The lozenges can be up to 196px wide. When the lozenge text exceeds this maximum width, the text is truncated with an ellipsis.

Overflowing text in a subtle lozenge
Overflowing text in a bold lozenge

Tooltips

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.

Tooltips and lozenges