Badges notify the user of a status, for example that there are new or unread messages or notifications. They typically describe or relate to another element on the page. Badges scale so that their height matches the font-size of their immediate parent element by using relative font sizing.
- In proximity to notifications or user avatars with eye-catching appeal (e.g. displaying unread messages count).
- Use for displaying quick, easily digestible bits of information.
Don’t use when
|Updated full layout.