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.
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
Last updated
