Save

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

---

Anatomy

Action footer

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

1. A success notification appears at the top right of the screen indicating changes have been saved

States

Save errors

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

1. Show validation errors inline if the Save button is actioned but something is wrong

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.

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.

Accessibility

Tabbing order

Basic form (left-to-right)

For the main content area.

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.

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.

1. Button, “Go back”
2. Button, “Leave without saving”
3. Icon button, “Close modal”

Additional resources

• https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html
• https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html
• https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html