Chips

Accessibility: Always use a link if it is an element that the user will interact with, such as a tooltip.

Chip Circle

Use only ONE character.

Outline:
Not documented as as yet.

EInsert screenreader alternative text here SInsert screenreader alternative text here

Solid:
Used as a legend to explain a character that may be unfamilar to the reader. Characters must be unique if used as a legend.
Used as color-coding for non-visually impaired users.
When color-coding, always ensure that non-visual or visually-impaired users have another way of understanding the content without relying on color alone.
Example: Navigate to Reports > select any report > expand category accordion to view legend.

TInsert screenreader alternative text here DInsert screenreader alternative text here IInsert screenreader alternative text here AInsert screenreader alternative text here TInsert screenreader alternative text here

Chip Square

Use UP TO SIX characters.

Outline:
Used as a tooltip usually in a grid, to explain characters that may be unfamiliar to the reader.
The steel or blue color is the most used in these instances because it does not distract from other content in the grid.
Example: Navigate to Exchange Client > Manage Quotes > Go to any quote > Continue through step(s) until you see the population grid.

EEmployee ESEmployee + Spouse

Solid:
Used as a tooltip to explain characters that may be unfamiliar to the reader.
Used as color-coding for non-visually impaired users.
When color-coding, always ensure that non-visual or visually-impaired users have another way of understanding the content without relying on color alone.
Example: Used in OutSystems UD (Unified Desktop) design.

CInsert screenreader alternative text here HInsert screenreader alternative text here IInsert screenreader alternative text here PInsert screenreader alternative text here SInsert screenreader alternative text here

Chip Colors

All possible colors available in solid or outline.

In general, red indicates that there is an error while yellow indicate that something needs attention. Green often indicates a successful or confirmed state.
This may differ per page as designed.

SSteel BBlue RRed GGreen YYellow

HTML
<!-- Example as legend - must always be followed by legend text-->
<span class="chip chip-square chip-square-steel">C</span> - Legend text

<!-- Example as a link -->
<a href="javascript:void(0);" class="tooltip-link chip chip-square chip-square-steel">C
    <span class="tooltip-content">Insert screenreader alternative text here</span>
</a>