> For the complete documentation index, see [llms.txt](https://hinahirani.gitbook.io/ui-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hinahirani.gitbook.io/ui-guide/components/badge.md).

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

![](/files/-MAaw4-IQYQ2-OL_GXpk)

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

![](/files/-MAaw7h0fWNOZ2wfVClT)