Badges are UI 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.
Numeric Value: These type of badges display numbers.
Text: Text badges display words or short phrases.
Icon: These type of badges display graphical icons or symbols.
Dot-Only: Dot-Only badges have no item.
When To Use Badges in UI Design
All badges should always be used with or within other components – such as avatars, navigation bars, tabs, etc.
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.
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.
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.
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.
How To Use Badges in UI Design
Behavior
When using badges, 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 describe clearly and intuitively the status of an object so that the 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”.
Positioning
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.
Colors
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.
Size:
Maintain consistency in badge sizes throughout your user interface. Avoid using different badge sizes in the same situation.
Use the Badge UI Element in Your UI/UX Design With uinkits
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find all types of badges and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!
