When to use counter?
Counters are small components that are used to display the total number of items contained in list or provide information about items hidden due to lack of space. They can be integrated in tabs, titles, navigation items, notifications or when you need to give information about number of something.
- Display the number of items hidden due to lack of space and make them visible.
Good practices
DO |
DO |
|
|
Examples:
|
In tabs To be used in tabs to provide information on the number of items in the element. This provides a quick and clear order of measurement for the user, who doesn't have to waste time consulting an empty tab.
|
|
In tabs (navigation) To be used in tabs (navigation) to warn of notifications/events. The counter can also be used to differentiate between tabs containing lists of items and tabs containing detail pages. |
|
In table/list Use in tables/lists to make visible items that cannot be displayed for lack of space. The counter then adopts a specific content "+(number of hidden elements)". Example: "+12 ". |