# Counter

### Usage

Counter notifications are used to inform users of a numerical value also indication for further action that could be required. They won't interrupt the user experience and should only be used within the primary navigation. They can appear with a number inside the circle or an icon.

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAb6FXWly2ggQ9NQpI1%2F-MAb6PXNMcb4Vzfq3xme%2FCounter.png?alt=media\&token=a7ba25b9-a5c2-420d-9449-34544d9800cf)

### Behaviour

* Appears with a number or an icon the light and default can be used where needed within the application. Default should be used within the navigation.
* Success (Green) is used to indicate that no action is needed and to inform the user of quantity
* Warning (Yellow) is used to indicate remedial action is needed, a warning notification will be sent the admin user to inform them
* Danger (Red) is used to indicate immediate action is needed, a danger notification will be sent the admin user to inform them with a link to action to rectify

### Best Practices

* Use the correct counter to communicate the correct action that needs to be taken      
* Always position the counter in the primary navigation but it can be used as a standalone element
* Must not exceed 3 digit’s (999) like badge component

### Style

* Circle is 28px height and placement of icon or number must always be central. 
* Padding is 4px. Font size; Caption 4
* Default styling as follows
  * Danger default; Red Base, Copy / icon colour; White
  * Warning default: Yellow L50, Copy / icon colour; Yellow D50
  * Success default; Green Base, Copy / icon colour; White
* Light styling as follows
  * Danger light; Red L90, Copy / icon colour; Red Base
  * Warning light: Yellow L90, Copy / icon colour; Yellow D50
  * Success light; Green L90, Copy / icon colour; Green Base

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAb6FXWly2ggQ9NQpI1%2F-MAb6VolPDwYPz4S6lwo%2FCounter%20example.png?alt=media\&token=029a9ce2-8ab8-46d2-b212-4a9dfddcd7cf)

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAb6FXWly2ggQ9NQpI1%2F-MAb6YjTPfjx7tmeKB3h%2FCounter%20tooltip.png?alt=media\&token=9f1a7e10-179f-4673-a8a9-238d8964cf42)