Badges are UI design elements that represent small overlapped values or other visual elements displayed on other interface components – such as avatars, buttons, icons, etc.
Badges are used as indicators to illustrate details associated with other elements. They are typically used along other components like avatars, buttons, etc., rather than being used as stand-alone elements. They consist of short text (usually numbers), colors, or icons and are placed next to the relevant component. Badges show notifications, events, or the status of an action.
Badges help users receive status updates and information from the system they are operating on, usually marking a numerical characteristic or marking an item. In UI/UX design, badges can be used to make an element stand out and vice versa, when an element needs to be differentiated.
All UI design badges should always be used with or within other components – such as avatars, navigation bars, tabs, etc. Even more so, in UI/UX design badges can be used as numerical, text, icons, and dot-only.
1. Numeric Values Badges
This type of badge displays a numerical value to indicate the count or quantity related to the associated action. These are in the form of a number inside a small circle used to show the number of notifications, messages, or updates the users have received.
2. Text Badges
Text Badges are short phrases or words used to indicate the status of an action, the content's label, or to organize an item. These badges are in the form of tags or names associated with the content.
3. Icon Badges
Icon Badges are graphical icons or symbols that illustrate the status of the related element. They can be used in updates or alerts, favoriting, status indicators, progress tracking, gamification, location services, etc. Icon badges take the form of the context where it is used in the user interface.
4. Dot-Only Badges (Badges with no items)
Dot-only Badges are small colored dots or circles without any numeric value, text, or icon. These are used as visual indicators to attract a user’s attention to an item without providing extra information.
When it comes to using UI design badges, there are several elements that can interfere with the power they carry. Their behavior, colors, positioning, and even their size need to be taken into consideration beforehand and chosen wisely. Colors carry a lot of meaning, we can all agree with this. When we see the color red we immediately think that something wrong is happening or maybe that a warring occurred. Green is used to show that an action has been completed successfully.
When using badges, we should use single words (“New!”), short phrases (“Partially Paid”), numerical values (“3” or “99+”, if the number is too high), and universally recognizable icons (“+”). Badges should always clearly and intuitively describe the status of an object so that users can correctly understand your user interface.
Pro Tip: With Text Badges, always write the label in the past tense – “partially paid”, not “partially pay”.
Badges are never stand-alone components. They should be on top or next to the element they represent so that users connect the badge with its context. Badges should also be visible but should not overlap the other elements or cause visual collisions.
The color of the badge should clearly describe the specific attention a user should allocate. For example, use warning or danger colors if the badge suggests an alert that needs to be resolved immediately. Use universally recognizable color patterns so that users can quickly recognize the importance level of an element.
Maintain consistency in badge sizes throughout your user interface. Avoid using different badge sizes in the same situation.
However, creating badges can become easier than ever with the help of a design system. With a design system, we automatically eliminate this dead time. Creating a component takes time – not only for designing but also for research and feedback.
Clearer guidelines mean less research and fewer rounds of feedback, which means fewer revisions. With a design system, it also means fewer risks of error.
We already established that it allows us to focus on more significant problems. However since design systems allow everyone to participate in the design process, we can delegate specific tasks even to those who are not experts. So, we don’t need to pay a senior UI/UX designer a bunch of money. We can do everything faster, with fewer resources, and more efficiently! In this situation, we do more with less!
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
