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
  • Avoid over-using them

Specification

  • Height: 24 px
  • Left, right, top, bottom padding: 8 px
  • Use the same colours as alert ribbons