Badge

This component calls attention to a status/tag/category and highlights it from the surrounding content.

Short description

To display a status in an intuitive and easy way

When and how to use it

Use this component to display a status in a more prominent way then just typing out the status. Use the respective colour for alert messages.

Behaviour

The behaviour is static.

Do's and don'ts

Don't
  • Don't use other colour than specified for alert banners
  • Avoid over-using them

Measurements

Height: 24 px

Left, right, top, bottom padding: 8 px