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.
Badges are small, often circular or rectangular elements that can display a number, status, or label. They are typically used to draw attention to specific information or to indicate the status of an item. Badges can be used in various contexts, such as notifications, labels, or status indicators.
Types
Different types of badges serve different purposes in user interfaces. The visual distinction helps users quickly understand the context and importance of the information being presented.
Standard Badge
Standard badges display a small circular notification indicator. They are commonly used to show counts or statuses on icons, buttons, or other UI elements.
Dot Badge
Dot badges are minimalist indicators that show a small dot rather than a number. They're useful when you just need to indicate the presence of notifications without specifying the count.
Status Badge
Status badges can be used to indicate the state of an item or component. They typically use different colors to represent different statuses such as online/offline, active/inactive, or success/error.
Colors
Badges come in different colors to help convey specific meanings. The color choice should be consistent across your application to maintain a clear visual language for users.
Positioning
Badges can be positioned in different locations around their parent element. The default position is top-right, but they can be adjusted to appear at various anchor points based on design requirements.
Visibility
Badges can be shown or hidden based on their content or specific conditions. For example, a badge might only appear when there are unread notifications and disappear when all notifications have been viewed.
