Badge
Badges are used to highlight key information, status, or notifications within an interface. They often contain short, concise text or numerical values to draw attention.
Last updated
Badges are used to highlight key information, status, or notifications within an interface. They often contain short, concise text or numerical values to draw attention.
Last updated
The Badge component is designed to present immediate, contextual information in a compact format. Typically used for alerts, statuses, or labels.
When users need to quickly identify the state of an element without needing to read detailed descriptions.
Apply badges to distinguish items with categories or labels, such as “Featured” or “Sale”.
Use badges to indicate the presence of additional actions or options, such as a new feature flag.
Badges are read-only and not interactive, should not be used instead of tags.
Avoid using badges if they clutter the interface or overwhelm the user with too many labels.
Badges are not suitable for displaying lengthy text or detailed information.
Tag: A label or keyword that categorizes or describes the badge's purpose. While similar to the Text element, the Tag often serves as a more specific or standardized label.
Icon Leading: An icon placed before the text in the badge. It adds visual context, helping users quickly understand the badge's meaning.
Avatar: Displays a small image or icon representing a user, group, or entity. Useful in situations where identifying the user or source is important, such as in notifications or lists.
Title: A short and direct text, providing the core message. This could be a status like "New" or "Error," a number indicating count, or any other brief descriptor.
Badge Container: foundational element that holds all other components together. It defines the shape, size, and overall layout of the badge.
Icon Trailing: An icon placed after the text or tag. It often complements the leading icon or adds further visual indication of the badge's purpose.
Small
12
16
22
Medium
14
20
28
Large
16
24
32
Screen Reader Support: Ensure that all badges are accessible to screen readers by providing descriptive text.
Color Contrast: Badges should have sufficient color contrast to be easily readable for all users, including those with color vision deficiencies.
Consistent Behavior: Badges should behave consistently across different parts of the interface to avoid confusing the user.
Badges are color-coded to represent different types (e.g., red for errors, green for success) but to enhance clarity and context, include elements like profile avatars or icons.
Status Updates: Indicate statuses like "Online" or "Error" within an application. For example, a green badge labeled "Active" next to a user’s profile.
Notifications: Display badges to show unread messages or new notifications. For instance, a badge with a number "3" on a message icon or a bell icon with a red badge to signify new alerts.
Categorization: Apply badges to label or categorize content, such as tagging an item as "New" or "Featured."
User Identification: Badges can include profile avatars to identify users within a list. For example, a badge with a user’s photo followed by their name.
