tutorials

Badges UI design research

Badge design UI/UX tips. Purposes, use-cases, UX patterns reviewed, and other things to consider.
January 2022 · 4 mins 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

Table of contents

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

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 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
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

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

Related links

This is all you need to know to design better Badges. Now it's time to visit the homepage of Setproduct, where you'll find a huge number of free and premium UI Kits and design systems.

Also, we specialize in custom design and development. We will be happy to help you with any project: Mobile & Web Apps, Websites, B2B, CRM, Delivery Systems, Online Learning Platforms, and lots more.

You can check our portfolio on many platforms: Dribbble, Twitter, Figma, Reddit, Pinterest, Linkedin. Also, make sure to check the Testimonials of our happy customers.

Other chapters: Avatars, Accordions, App bars, Breadcrumbs
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎