Badge

Usage

Badge notifications appear temporarily and are used to inform users that there is a new activity or action required. They won't interrupt the user experience and disappear once the user has read the alert or message. They appear with a number inside the circle and placement is always at the top right corner.

Behaviour

• Appears only with a number

• Disappears when there are no alerts or messages or no action needs to be taken

Best Practices

• Use the badge to communicate alerts or messages or an action that needs to be taken

• Always position the badge at the top right to clearly identify the object

• It can be used in primary navigation but also as a standalone element with a tag

Style

• Rectangle is 16px height with radius of 10px, and a border of white (0.5px)

  • Default; Blue Base, Copy colour White.

  • Danger; Red Base, Copy colour; White.

  • Warning: Yellow L50, Copy colour; Yellow D50.

  • Success; Green Base, Copy colour; White.

  Font size 10px (Open sans regular), with line height 16px