Badge
A badge is a small piece of information that is used to convey a specific message or status. It is often used to provide additional context or information about an item, such as a notification count, status indicator, or label.
For proper application, badges should be used consistently throughout the user interface to maintain clarity and user understanding.
Function
The function of badges determines how they should be used in different scenarios to provide users with additional context or information.
Notification Badge
Notification badges are commonly used to display counts of unread messages, alerts, or notifications. They typically appear as small circular indicators with numbers and are positioned at the top-right corner of icons, buttons, or user avatars.
Status Badge
Status badges indicate the current state of an item or user. They can show whether a user is online/offline, if a service is active/inactive, or if a process is pending/completed. Status badges often use color coding to convey meaning, such as green for "online" or red for "error."
Label Badge
Label badges categorize or tag elements in the interface. They might indicate features like "New," "Premium," or "Beta" to highlight special characteristics of an item. These badges are often rectangular and contain text rather than just a number or dot.
Feature Item
Color Usage
Colors play a crucial role in communicating the meaning and importance of badges. Using consistent color patterns helps users quickly understand the information being presented.
Primary Color
Primary color badges are typically used for standard notifications or counts that don't have a specific urgency level.
Secondary Color
Secondary color badges can be used to differentiate between different types of notifications or to create visual hierarchy.
Error Color
Error color badges (typically red) indicate important notifications that require immediate attention or critical status information.
Warning Color
Warning color badges (typically yellow/orange) indicate notifications or status that requires attention but isn't critical.
Success Color
Success color badges (typically green) indicate positive status or completed actions.
Best Practices
When using badges in your interface, consider these guidelines to ensure they're effective and user-friendly:
Keep it Simple: Badges should be concise and only display essential information. For notification counts, consider using "99+" for large numbers to save space.
Consistent Positioning: Place badges in consistent locations relative to their parent elements to create a predictable pattern for users.
Use Color Meaningfully: Choose badge colors purposefully to convey information about priority or status.
Ensure Visibility: Make sure badges have sufficient contrast against their background to be easily visible.
Avoid Overuse: Too many badges can create visual noise. Use them sparingly for important information only.
