Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information.



CompletedNeeds attentionRejected


  • A label text should always be provided with a status label. Do not use status labels without text or with icons only.
    • Icons inside status labels are allowed if they are accompanied with a text label.
      • Make sure the icon matches the visual label. Do not add an icon only for visual purposes.
  • Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows.
  • Use status colours consistently. You can find guidelines on when to use each status colour in the colour guidelines.
  • Status labels are often related to some other element on the page (e.g. table row). Aim to keep the status label and its related elements close to each other so the user can easily interpret the relation.



StatusLabel comes in five (5) different types. One neutral and four (4) with different status colours.


With an icon

An icon can be used on the left side of the StatusLabel's text label. The icon should match with the text label and not be used only for visual purposes.