Badge

A status word in a coloured box. The word carries the meaning; the colour reinforces it.

<div class="ag-cluster">
  <span class="ag-badge">New</span>
  <span class="ag-badge ag-badge--neutral">Draft</span>
  <span class="ag-badge ag-badge--info">In review</span>
  <span class="ag-badge ag-badge--success">Approved</span>
  <span class="ag-badge ag-badge--warning">Action needed</span>
  <span class="ag-badge ag-badge--error">Rejected</span>
</div>

Accessibility

• Every variant passes 4.5:1 with white or ink text. The neutral badge has a border so it is visible in forced colours.
• One or two words. A badge is not a sentence.
• It is uppercase for scanning in tables. It is the only uppercase in the system.
• Do not use a badge as a link or a button. It is a label.