Badges UI design research

Badge design UI/UX tips. Purposes, use-cases, UX patterns reviewed, and other things to consider.

Badge UI design exploration — Tips & tricks, usability, and use cases review
Tutorials

Published on

January 10, 2022

|

Blog

Badge UI design exploration — Tips & tricks, usability, and use cases review

Navigation

Subscribe to new posts

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

Author image

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

{{spacer-64}}

{{setproduct-gpt}}

{{spacer-64}}

Badge 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

{{spacer-24}}

Purposes

Badge with a Numeric value is used to represent the number of events related to the parent UI item:

Badge UI design exploration

{{spacer-16}}

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

{{spacer-16}}

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

{{spacer-16}}

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

{{spacer-24}}

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.

{{spacer-64}}

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

{{spacer-24}}

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

{{spacer-16}}

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

{{spacer-24}}

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

{{spacer-24}}

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

{{spacer-24}}

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

{{spacer-64}}

UX & Use cases

There are several UX patterns where are Badges most commonly used:

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

{{spacer-24}}

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

{{spacer-24}}

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

{{spacer-24}}

Ecommerce

In most shopping apps Badges are used to display the number of products added to a cart:

Badge UI design exploration

{{spacer-24}}

Social

Icon-only Badge represents additional properties/statements for the person:

Badge UI design exploration

{{spacer-16}}

Dot-only Badge displays user's status — Is it online, or not:

Badge UI design exploration

{{spacer-24}}

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

{{spacer-24}}

Categorizing

Separate content categories by using Badges to label and divide sections making them distinguishable by using different colors:

Badge UI design exploration

{{spacer-16}}

Sometimes Badges are used as tags to highlight special deals:

Badge UI design exploration

{{spacer-24}}

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

{{spacer-24}}

{{stars-conclusion}}

{{spacer-24}}

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.

{{spacer-64}}

Related links

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
No items found.

Our Dashboard Templates Will Make It A Treat To View Data

Experience the magic of data visualization with our user-friendly dashboard templates. Try out our dashboards now and enjoy efficient reporting processes, greater transparency in, among others monitoring and making educated decisions easily.
Material X for Figma

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tutorials

8 min read

Button Group UI design guide

Get the ultimate guide to Button Group design principles, including usability, accessibility, and visual design. Learn how to design Button Groups that boost user engagement and satisfaction

Tutorials

10 min read

Carousel UI design best practices

Design accessible slider galleries, usable, and beautiful. Read our detailed guide on Carousel UI Design and learn how to design carousels that engage users.

Tutorials

5 mins read

Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases

Get practical solutions for Checkbox design dilemmas, from styling complexity to inclusive user experience, in this dedicated tutorial.

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts crafted for Figma.

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

This is some text inside of a div block.
This is some text inside of a div block.