# Saving (/patterns/saving)



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.

<PatternIllustration pattern="saving" />

## Choose a save model [#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 [#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 [#feedback-and-leaving-the-page]

Use [Button](/components/button) for explicit saving and [Banner](/components/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](/patterns/loading) and [Error handling](/patterns/error-handling) for the related states.