Counters are compact visual indicators used to display numerical values like notifications, limits, or counts. They are designed to grab attention and are typically styled with a red circular background and white bold text for high contrast. These counters are placed strategically within the UI, such as next to tabs, menu items, or notifications, to inform users of updates, actions, or limits.

The counters are implemented simply by adding a <div> with the class counter and specifying the number to display. Their appearance and positioning are controlled by pre-defined CSS, making them easy to integrate into any project with minimal effort.

To implement a red counter, simply add the following HTML structure where needed:

Example 1: Tab Counter

Example 2: Menu Notification Counter