Badge Display Widget
Component Detail
User Interface
low complexity
mobile
0
Dependencies
1
Dependents
2
Entities
0
Integrations
Description
Reusable widget that renders a single badge tile with its SVG or PNG asset, title, and status indicator. Handles locked state (greyscale overlay) and earned state (color with earned date). Provides WCAG-compliant accessible alt text and sufficient contrast ratios for all badge states.
badge-display-widget
Responsibilities
- Render badge asset from cached URL with fallback placeholder
- Apply locked or earned visual state with proper contrast
- Expose semantic accessibility label for screen readers
- Support tap callback to open badge detail sheet
Interfaces
BadgeDisplayWidget({badge, isEarned, onTap})
renderAsset(url, altText)
applyLockedState()
applyEarnedState(earnedAt)
getAccessibilityLabel()
Relationships
Related Data Entities (2)
Data entities managed by this component