Agent WranglersFeedback and dialogs Required
Keep errors that need action on screen
Show an error that people must act on next to its cause, and keep it until it is fixed. Never put it only in a toast that disappears.
How to do it
A failed save, a payment that needs a new card or an import with bad rows needs a fix, so it stays. Put form errors next to fields, as form errors describes. Put errors for a whole screen in a banner at the top of the main area, with role="alert" only when it appears after an action. Say what happened and what to do next.
Example
<div role="alert" class="screen-error">
<p>Your card was declined, so the subscription is paused.</p>
<a href="/billing/card">Update your card</a>
</div>How to check
A browser test makes a save fail. After 30 seconds the error text is still visible and names the next step.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/errors-stay-on-screen.