Saving
Make unsaved, pending, saved, and failed changes distinguishable
Show whether the latest edit has been saved. Keep the status near the edited content or its Save action. “Saved” should mean the application has confirmed the latest change, including any required server write.
A local change is still a draft. Keep its unsaved status beside the editor.
Illustrative example · Reduced motion: choose a state to compare.Choose a save model
Use explicit saving when several fields form one decision or a change has consequences that need review. Use autosave for incremental edits when the application can preserve drafts and recover failures. Keep the model consistent within a task.
| State | Message or action | Expected behavior |
|---|---|---|
| Edited | “Unsaved changes” and Save, or a pending autosave status. | Preserve the current input. |
| Pending | “Saving…” | Track which revision is being written. |
| Confirmed | “Saved” | Confirm the latest revision only. |
| Failed | “Could not save” and Retry. | Keep the edits and explain recovery. |
| Conflict | Explain that the stored version changed. | Let the person compare or reconcile changes. |
Handle changes during a request
An earlier response must not mark newer edits as saved. Associate requests with the revision they contain and keep the pending or unsaved status until the latest revision is confirmed. If a retry could repeat a write, make the operation safe to retry.
For autosave, group rapid edits into reasonable requests. Show a persistent error when saving stops working. Do not let a disappearing notification be the only record of an unsaved change.
Feedback and leaving the page
Use Button for explicit saving and Banner for a persistent failure that affects the editor. Text such as “Saved” must carry the meaning even when an icon or color is also present. Announce changes without taking focus from the field being edited.
Warn before navigation that would discard edits when the application can still prevent it. If a local draft is retained, identify it as a draft until the server confirms the write.
Check rapid typing, a late response, offline edits, a retry, and changes made in another session. See Loading and Error handling for the related states.
Last updated on 2026-10-31
Was this page helpful?