Icon — to show up the status of the underlying object
No item (dot-only Badge) — to inform without details
Badge with a Numeric value is used to represent the number of events related to the parent UI item:
Use Badges with a Text caption to specify a label for the variety of objects (e.g. to tag a topic, categorize items, or indicate views amount):
Use Icons inside Badge to show up the condition of a related component, or response to a user with the feedback.
For example, it's clear there is a kind of error with synced devices settings section and there is something downloaded successfully:
Dot-onlyBadge is used in order to just attract your attention to the specific control and encourage you to explore what is inside:
The Badge's container expands to the left, right, or from the center depending on the number of caption symbols. Use "+" or "k" abbreviations to decrease symbols amount and save space:
When Badge stretches to the right, make sure your neighbour UI elements aren't pushed aside in your layout, due to a container width is now enlarged.
Styles & Themes
For a deep themification in order to set Badge more distinct, you have to apply several properties:
Colors — to regulate the Badge priority
Corner radius — to set a Badge's container shape
Outline stroke — to visually separate Badge from underlying item
Shadow — to set a style with hovering effect
Solid Badges are more visible than shaded (where the opacity is reduced to 15–20%). Us them in priority cases, while shaded Badges may be applied for other cases, e.g. categorizing topics, tagging, etc.:
Choose Badge's colors wisely in order to make it more attentive or recognizable on every surface, especially when placed over images:
Adjust corners radius for Badges to vary container shapes. Rounded Badges are a popular use case, whereas enlarging to pilled when the counter is growing. You may use a square Badge in order to fit to your layout specs (e.g. for squared UI design — IBM Carbon design system):
This UI design small hack helps to separate a Badge and make it detached and detectable almost over every background color. Just stroke Badges with the same color as the surface:
By setting a smooth shadow behind Badges (use the same color), you will simulate a tiny and elegant hovering effect:
UX & Use cases
There are several UX patterns where are Badges most commonly used:
In conversational patterns (Chat, Messages, Inbox) Badge used to inform about new incoming messages. Dot distinctly divides fresh emails and recent:
It's user-friendly to overlap a Badge over filtering control when some options were selected before.
Below we see some tooltips on the map. It's clearly distinct — some filtering options were picked affecting on results, and Badge has now appeared at the app corner:
In most shopping apps Badges are used to display the number of products added to a cart:
Icon-only Badge represents additional properties/statements for the person:
Dot-only Badge displays user's status — Is it online, or not:
There are cases when Badge helps to encourage users to take action or perform a choice commercially valuable.
Here is a Badge placed over segmented control to highlight the necessity to choose yearly payment:
Separate content categories by using Badges to label and divide sections making them distinguishable by using different colors:
Sometimes Badges are used as tags to highlight special deals:
Implement Badges to display extra properties for a content item, or to visualize the number of parameters the specific item is associated with:
This is all you need to know to design better Badges.
Hope this exploration will help you to improve your in-app UX. The next chapter is for the Breadcrumbs, probably. Stay tuned!