Introduction
A badge is as a visual representation conveying numeric values like counts or status information. It can incorporate labels or numbers. The badge typically positioned inside or near a larger interface component, serves as a representation of a status, property, or other metadata.
- Badges convey metadata such as numbers or labels
- Badges need to be placed with a related element, e.g. an icon or a label
Usage
Badges help to draw attention or give addtional information to a connected item. Typically, badges are attached to icons, buttons or labels to indicate the number of unread messages or notifications awaiting the user's attention.
Use a badge to convey numeric information, such as number of available units.
Don't use a badge to convey pricing information.
Display a badge next to an icon or label to display [numeric] notifications.
A badge must be attached to another element, therefore don't use a badge on its own.
Use a badge to attract attention to updates, e.g. as a “new” badge in a navigational element.
Badges are not interactive elements, therefore don't use them as such. Opt for buttons or links instead.
Also known as
Label, Notification Bubble, Notification Dot