CommunicationMaterial Design 3
Badges
Badges are small visual indicators that display status, notifications, or counts. They draw attention to associated UI elements and provide quick information at a glance.
Overview
Material Design badges appear as small circles or pills positioned on or near another element, typically icons or buttons. They can display numeric values (like notification counts) or simply indicate the presence of new content with a dot indicator.
Live Preview
3
Large
12
Small
Dot
99+
Max
Interactive counter:
3
Badge Colors
5
Primary
!
Error
Success
Warning
Brand Properties
The following table shows all CRAFT Badge properties with their default values and brand-specific mappings.
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Background Color | Color picker | #B3261E | #038012 | #1A5129 |
| Text Color | Color picker | #FFFFFF | #FFFFFF | #FFFFFF |
| Size (Large) | Input (px) | 16px | 22px | 22px |
| Size (Small) | Input (px) | 6px | 12px | 12px |
| Font Size | Dropdown | 11px | 12px | 12px |
| Font Weight | Dropdown | 500 | 600 | 600 |
| Border Radius | Input (px) | 9999px (full) | 9999px | 9999px |
| Min Width | Input (px) | 16px | 18px | 18px |
| Padding Horizontal | Input (px) | 4px | 6px | 6px |
| Max Count | Input (number) | 99 | 99 | 99 |
| Position Offset X | Input (px) | -4px | -4px | -4px |
| Position Offset Y | Input (px) | -4px | -4px | -4px |
Placement
Icon
3Icon
3Icon
3Icon
3Accessibility
- Use
aria-labelto describe badge content for screen readers - Ensure sufficient color contrast (4.5:1 minimum) for badge text
- Do not rely solely on color to convey meaning - use text or icons
- For notification counts, announce changes with
aria-live - Badge content should be meaningful (e.g., "3 new notifications" not just "3")
Best Practices
Do
- Use badges sparingly to highlight important updates
- Show max count (99+) for large numbers
- Position badges consistently across the interface
- Use dot badges when count is not important
Don't
- Overuse badges - they lose impact
- Show badges with zero or negative values
- Use badges for static content that never changes
- Make badges too large or distracting
Related Components
- Communication Overview
- Snackbar - For temporary notifications
- Actions - Icon buttons with badges