Badges

Badges are used to highlight important changes of state in an element, mark them, or draw attention to counters.

Use badges to highlight or differentiate key elements. However, do it with caution. Drawing attention to many pieces may result in creating much noise.
Badges are good for counters, for example, to show the number of new messages.
Badges should not provide interaction. However, its parent element may.
Don't use long texts within a badge. Whenever possible, limit it to a maximum of 3 words or less.

Badge types

How to use this element

Example

Code

Report an issue or share an idea

Include screenshot of current page

moveclose

Thank you for helping us improve EOS.