Pause Status Indicator
Component Detail
Description
Reusable badge/chip widget rendering the peer mentor's status enum (active, paused, expired_cert, resigned) with appropriate color coding and icon. Used on roster lists, contact cards, and detail screens across multiple features.
pause-status-indicator
Summaries
Consistent, instant visibility into a peer mentor's current status is essential for coordinators making real-time decisions about participant assignments and program coverage. This shared indicator widget ensures every screen in the application communicates mentor availability in a uniform, immediately recognizable way — reducing the cognitive load on coordinators and eliminating the risk of misreading status. Because it is shared across roster lists, contact cards, and detail screens, a single well-designed implementation delivers consistent communication throughout the product, directly improving coordinator confidence and reducing errors in status interpretation.
Despite its low complexity, this component carries high project leverage because it is shared across multiple features and screens. Building it once correctly — with all four status enum values, both compact and expanded display modes, and WCAG 2.2 AA contrast compliance — saves duplicated effort across every feature team that needs status display. It should be prioritized early in the mobile development schedule so dependent screens can integrate it without blocking. Testing scope includes all status enum values in both display modes, accessibility auditing, and visual regression.
The main delivery risk is design inconsistency if status colors are not locked in the design system before implementation begins.
Shared, stateless mobile UI component rendering the peer mentor status enum (active, paused, expired_cert, resigned) as a badge or chip. The render(status) interface is the primary entry point; getStatusColor, getStatusLabel, and getStatusIcon are utility methods that map enum values to visual properties, enabling flexible composition. Two display modes are supported: compact (badge only) and expanded (badge + label). The component has zero dependencies and is purely presentational — all data is passed via props.
WCAG 2.2 AA contrast compliance is a hard requirement; color values must be validated against the background tokens defined in the design system. Given its shared status, any interface changes are a breaking change across all consuming screens.
Responsibilities
- Render correct color and label for each status enum value
- Support compact (badge) and expanded (with label) display modes
- Remain accessible with sufficient contrast ratios per WCAG 2.2 AA
Interfaces
render(status)
getStatusColor(status)
getStatusLabel(status)
getStatusIcon(status)
Relationships
Dependents (2)
Components that depend on this component