Jump to main content

Status labels

How it works

Status labels are used to signify status, tags or any other information. The colours have semantic meaning, reflected by the name given in the code example.

Semantic colour can help users recognise and recall meaning more quickly, especially when scanning a view, for example. It’s important that status labels still convey the same meaning without colour information.

Considerations

This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:

  • Select an appropriately coloured label which makes sense semantically for your use case.
  • Ensure you don’t use colour as the only visual means of conveying information or an action - the text within the label should be descriptive enough.

Resources

Applicable WCAG guidelines: