Skip to main content
Table of Contents

Save

The Save command is used whenever a user wants to apply changes or maintain progress.

Table of Contents

Anatomy

Action footer

Save pattern anatomy
  1. The Save button is the primary button on a page, placed at the end of all form inputs
  2. The Cancel button is a basic button, left of the Save button
  3. In a page footer, the Save and Cancel buttons remain fixed

Saving changes

Saving applies to a page or view.

Always enable the Save button for users to trigger an action even if there are no new changes to save.

  • If there are tabs, save all data per tab
  • If the page or tab has an indication of the last edit date, that timestamp should update
  • After changes are saved, show a loader inside the Save button if saving takes time, and ignore trigger actions for the duration
  • Ensure a custom, translated label for the loader is provided on implementation

Notifications

Successful save

Save pattern success notification
  1. A success notification appears at the top right of the screen indicating changes have been saved
Do this
  • Use transient notifications to confirm saving actions
Not this
  • Do not place actions inside notifications as it is transient and inaccessible

States

Save errors

Errors can be presented in a variety of ways, depending on the issue.

Save pattern error single field
  1. Show validation errors inline if the Save button is actioned but something is wrong
Save pattern multiple errors
  1. An error alert that summarizes the errors at the top of the page improves screen reader accessibility

Unsaved changes

If a user navigates away from a page, tab or stepper flow before applying changes, use an Unsaved changes modal.

Save pattern Unsaved changes
  1. Leave without saving reverts all values on the page to the last saved state without reloading the page
  2. Go back returns to the previous view without discarding changes and reloading the page

Canceling changes

Cancel actively discards changes the user made and dismisses the current view. Cancel should never clear the form, or clear changes and reload the page. This increases the risk of accidental data loss.

Workflows

Basic form

Watch video

Tabs

Watch video

Localization & internationalization

RTL (right-to-left)

For RTL languages, the layout of the interface is mirrored.

Arabic RTL notification example

Accessibility

Tabbing order

Basic form (left-to-right)

For the main content area.

Save pattern action footer focus
  1. Breadcrumb, “Shop”
  2. Breadcrumb, “Customize”
  3. Input, “Section name required”
  4. Input, “Description required”
  5. File Upload, “Drag files here or click to upload”
  6. Button, “Cancel”
  7. Button, “Save”

Basic form validation

Screen readers will read the alert message at the top of the page to summarise all errors on the page or view.

Save pattern validation alert focus
  1. Input, “Section name required, enter a section name”
  2. Input, “Description required, enter a description”
  3. File Upload, “Drag files here or click to upload”
  4. Button, “Cancel”
  5. Button, “Save”

Unsaved changes

Focus will be trapped inside the modals interactive elements until the user actions those elements, presses esc or clicks outside the modal.

Save pattern Unsaved changes focus
  1. Button, “Go back”
  2. Button, “Leave without saving”
  3. Icon button, “Close modal”

Additional resources

Feedback

Help improve this page. Give us your feedback