notifications-and-recovery

# Notifications and Recovery When something changes — success, failure, or anything in between — the user must know. And when something goes wrong, they must always have a path forward. A notification without a recovery action is just an apology. --- ## Pattern Selection | Pattern | When to use | Dismissal | |---|---|---| | **Toast** | Transient result of a user action (saved, sent, deleted) | Auto-dismiss 4–6s, manual close | | **Inline error** | Field-level validation, form errors | Clears on correction | | **Alert banner** | Persistent issue affecting the current context | Manual dismiss or resolved state | | **Modal / dialog** | Blocking error requiring a decision before continuing | User action required | | **Empty state** | No data yet — guide the user to the first action | N/A | | **Skeleton / loading** | Async content pending | Replaced by content | | **In-place confirmation** | Inline edit saved, row updated, item toggled | Auto-clears after 2–3s | --- ## Toast Notifications Toasts confirm that a background action completed. They appear without interrupting the user's flow. **Placement:** bottom-center or bottom-right. Never top-center — it competes with page content and navigation. **Duration:** 4–6 seconds for information. Errors should persist until dismissed — the user needs time to read and act. **Anatomy:** ``` [Icon] Message text [Action] [×] ``` - Icon: colour-coded (green ✓ success, red ✗ error, orange ⚠ warning, blue ℹ info) - ...