# 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.

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAaw4-IQYQ2-OL_GXpk%2FBadges.png?alt=media\&token=25dc5b80-c17c-4631-9555-902255eebc32)

### 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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAaw7h0fWNOZ2wfVClT%2FBadge%20Example.png?alt=media\&token=4288e4bc-57e4-4a70-b953-f3b9f2459f16)