You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
We used to reply ASAP
Hire Setproduct professionals for your project
We'll take any of our Figma design systems, adjust with your brand guidelines, create all the additional custom templates, and code a web application based on React, Angular, Vue or etc.
We used to reply ASAP
Looking for a custom design based on our Figma templates? We are ready to customize any of our UI kit personally for you and create custom design based on your brief, wireframes, outdated UI or online call. Please, fill the form below or drop us a line at email@example.com
Badge design UI/UX tips. Purposes, use-cases, UX patterns reviewed, and other things to consider.
January 2022 · 7 mins to read
by Roman Kamushken
What is Badge?
Badge(aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Badge UI design exploration. Tips, visual tricks, and use-cases.
Table of contents
Styles & Themes
UX & Use cases
The default content of Badge's body is
Numeric value — to display the number of events
Text caption — to tag, name or categorize items
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 neighbor 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:
Subscribe to Setproduct
Setproduct newsletter with new products, freebies, inspiration and regular discounts ⭐️
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!