Notification & Alert
Contextual messages for feedback, warnings, and errors. Composes Icon and Button atoms. Supports four severity types, optional dismiss functionality, and action buttons. Critical for communicating system status in crisis reporting workflows.
Preview — Success Notification
Your damage report has been submitted and synced successfully.
Preview — Error with Action
Failed to sync 3 reports. Check your connection and try again.
Types
Your session will expire in 10 minutes. Save your work.
Report RPT-2026-042 has been verified by a coordinator.
You are working offline. Reports will sync when connection is restored.
Photo upload failed. The file may be too large.
Dismissible
Click the X to dismiss this notification.
Accessibility
- Error and warning notifications use
role="alert"for immediate screen reader announcement. - Info and success notifications use
role="status"witharia-live="polite". - Dismiss button has
aria-label="Dismiss notification". - Icons are decorative — the text message carries the full meaning.
Trauma-Informed Design
- Error messages include actionable guidance: "Check your connection and try again" not just "Failed."
- Warning notifications use amber, not red, to avoid triggering alarm responses.
- Dismissible notifications give users control over their visual environment.
- Action buttons provide a clear next step rather than leaving users stranded with an error.