Become an affiliate and earn up to 35%
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.
How to reach you out?
Type of job
Select design system
Whats your approximate budget?
URL (optional)
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 hello@setproduct.com
Your e-mail
Pick a design system for your project
Pick a project size
Describe in a few words (optional)
For browser-based applications
For iOS & Android mobile apps
Whats your budget, USD
Please, provide the approximate number. The total price depends on the amount of templates in your order
1000
10000

How to design Badges

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.
"Designing Components"
Badge UI design exploration. Tips, visual tricks, and use-cases.

Table of contents

Anatomy
  • Content
  • Purposes
  • Behavior
Styles & Themes
  • Colors
  • Corner radius
  • Outline stroke
  • Using shadow
UX & Use cases
  • Communication
  • Filtering
  • Ecommerce
  • Social
  • Marketing
  • Categorizing
  • Tagging
Badge UI design exploration

Anatomy

Content

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
Purposes

Badge with a Numeric value is used to represent the number of events related to the parent UI item:
Badge UI design exploration
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):
Badge UI design exploration
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:
Badge UI design exploration
Dot-only Badge is used in order to just attract your attention to the specific control and encourage you to explore what is inside:
Badge UI design exploration
Behavior

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:
Badge UI design exploration
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
Colors

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.:
Badge UI design exploration
Choose Badge's colors wisely in order to make it more attentive or recognizable on every surface, especially when placed over images:
Badge UI design exploration
Corner radius

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):
Badge UI design exploration
Outline stroke

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:
Badge UI design exploration
Using shadow

By setting a smooth shadow behind Badges (use the same color), you will simulate a tiny and elegant hovering effect:
Badge UI design exploration
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:

  • Messaging
  • Filtering
  • Ecommerce
  • Social
  • Marketing
  • Categorizing
  • Tagging
Messaging

In conversational patterns (Chat, Messages, Inbox) Badge used to inform about new incoming messages. Dot distinctly divides fresh emails and recent:
Badge UI design exploration
Filtering

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:
Badge UI design exploration
Ecommerce

In most shopping apps Badges are used to display the number of products added to a cart:
Badge UI design exploration
Social

Icon-only Badge represents additional properties/statements for the person:
Badge UI design exploration
Dot-only Badge displays user's status — Is it online, or not:
Badge UI design exploration
Marketing

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:
Badge UI design exploration
Categorizing

Separate content categories by using Badges to label and divide sections making them distinguishable by using different colors:
Badge UI design exploration
Sometimes Badges are used as tags to highlight special deals:
Badge UI design exploration
Tagging

Implement Badges to display extra properties for a content item, or to visualize the number of parameters the specific item is associated with:
Badge UI design exploration
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!

Other chapters: Avatars, Accordions, App bars

Have I missed something? Please, shoot me out at kamushken@gmail.com

Related links

More to ☕ read

Show more