ui-save-bar
The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be controlled declaratively through the ui-save-bar
element.
Anchor to ui-save-bar elementui-save-bar element
The ui-save-bar
element is available for use in your app. It configures a save bar to display in the Shopify Admin.
You can provide HTML <button>
elements as children to hook into the Save and Discard buttons. The button with variant primary
is the Save button and the button without a variant is the Discard button.
HTML <button>
elements to hook into the Save and Discard buttons of the contextual save bar.
The button with variant primary
is the Save button and the button without a variant is the Discard button.
Whether to show a confirmation dialog when the discard button is clicked
A unique identifier for the save bar
Anchor to ui-save-bar instanceui-save-bar instance
The ui-save-bar
element provides instance methods to control the save bar.
Add 'show' | 'hide' event listeners.
A getter/setter that is used to set discard confirmation.
Hides the save bar element.
Remove 'show' | 'hide' event listeners.
Shows the save bar element.
A getter that is used to check if save bar is showing.
Toggles the save bar element between the showing and hidden states.
Save Bar
Custom element
Preview

Anchor to examplesExamples
Save bar options, variations, and events
Anchor to example-save-bar-controlled-by-the-ui-save-bar-elementSave bar controlled by the ui-save-bar element
Anchor to example-show-the-save-barShow the save bar
Control the save bar through show and hide instance methods
Anchor to example-showing-a-discard-confirmation-modalShowing a discard confirmation modal
Set the attribute on the
ui-save-bar
element to show a confirmation modal after the user clicks the Discard button of the save bar