Badges Screen
Component Detail
User Interface
medium complexity
mobile
2
Dependencies
0
Dependents
2
Entities
0
Integrations
Description
Full-screen page displaying all badges available in the system, grouped by category (earned, in-progress, locked). Each badge shows its icon, name, unlock criterion, and earned date if applicable. Designed for WCAG 2.2 AA compliance with descriptive alt text on all badge imagery.
badges-screen
Responsibilities
- Render earned and unearned badge grid with status indicators
- Display badge unlock criteria and progress toward next badge
- Support screen reader navigation with semantic labels and alt text
- Link to peer mentor profile badge section for coordinators
Interfaces
loadBadges(userId)
renderBadgeGrid(badges)
renderEarnedBadge(badge)
renderLockedBadge(badge, progress)
showBadgeDetail(badgeId)
filterByCategory(category)
refreshBadgeState()
Relationships
Dependencies (2)
Components this component depends on
Related Data Entities (2)
Data entities managed by this component