Error Handling
Error handling is a UI feedback pattern for communicating problems and recovery paths. Messages should be
specific, helpful, and concise.
Choose the right pattern
| Pattern |
Scope |
Use when |
| Inline validation |
Single field |
Format or required errors tied to one input |
| Alert banner |
Form or page |
Submit blocked; multiple errors or system failure |
| Toast / snackbar |
Global |
Success or low-priority notice; no field to anchor to |
| Badge |
Control adornment |
Ongoing count or status — not a one-time message |
Feedback types
| Type |
When |
| Inline validation |
On blur or while typing; field-level message below control |
| Alert banner |
Form-level or action failure; blocked operations |
| Toast / snackbar |
Transient confirmation or low-priority notice |
| Loading |
Spinner or skeleton while async work runs |
| Success |
Completed actions with optional next steps |
Inline validation
Alert variants
Unable to save file. Check that the output folder exists and you have write permission.
Image exported successfully to C:\Exports\sample.tif
Large file size may slow export. Consider reducing resolution.
Analysis will continue in the background. You can close this panel.
Toast and loading
Message guidelines
- Specific — explain exactly what went wrong.
- Helpful — provide guidance on how to fix the issue.
- Concise — keep messages brief but informative.
- Combine color, icons, and text — do not rely on color alone.
- Offer retry, alternative paths, or support when recovery is possible.
When to show errors
- Immediate — inline validation as user completes fields
- On submit — form-level summary if submission fails
- On action failure — save, export, delete blocked
- On load failure — missing resource or network error