Blueweb
How to use
Use a badge to display contextual information, such as a status or a count, that relates directly to a nearby or nested UI element. Common examples include showing the number of unread messages, alerts, or pending tasks.
Badges should always be visually connected to the element they refer to, helping users understand where the information applies and guiding them toward the next relevant action.
Types
Badges can communicate different levels of urgency through color.
Do’s and Don’ts
Do
Use consistent placement to maintain visual clarity.
Keep the content inside the badge short.
Don't
Don't display long number inside badges.
Don't use inconsistent placement.
Size
Badges are available in three sizes: Small, Medium, and Large. Use size to adapt to the parent element’s scale or visual importance.
Tip: When in doubt, use Medium or contact the Aero team for guidance.
Accessibility
- Ensure badge text has sufficient contrast against its background.
- Provide a semantic label or aria-label if the badge contains only a number or icon.
- When badges are used with dynamic content (like live counters), update them programmatically with proper announcements for assistive technologies.
Content
Badges should contain numbers only, representing counts or quantities (e.g. messages, tasks, alerts). Keep the content concise and meaningful.
- Use plain numbers (e.g. 3, 12) without additional symbols or punctuation.
- For large numbers, abbreviate if necessary (e.g. 99+) to avoid layout issues.
- Do not use decimals or unnecessary formatting.
Badges are not meant to display text or labels. If you need to show a status label, consider using a different component like a Tag or Status Indicator.
Availability
Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.
Mobile
Kiosk
Design status
Ready