Skip to main content

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.

Anchor to children
children

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.

Anchor to discardConfirmation
discardConfirmation
boolean

Whether to show a confirmation dialog when the discard button is clicked

Anchor to id
id
string

A unique identifier for the save bar

Was this section helpful?

Anchor to ui-save-bar instanceui-save-bar instance

The ui-save-bar element provides instance methods to control the save bar.

Anchor to addEventListener
addEventListener
(type: "show" | "hide", listener: EventListenerOrEventListenerObject) => void

Add 'show' | 'hide' event listeners.

Anchor to discardConfirmation
discardConfirmation
boolean

A getter/setter that is used to set discard confirmation.

Anchor to hide
hide
() => Promise<void>

Hides the save bar element.

Anchor to removeEventListener
removeEventListener
(type: "show" | "hide", listener: EventListenerOrEventListenerObject) => void

Remove 'show' | 'hide' event listeners.

Anchor to show
show
() => Promise<void>

Shows the save bar element.

Anchor to showing
showing
boolean

A getter that is used to check if save bar is showing.

Anchor to toggle
toggle
() => Promise<void>

Toggles the save bar element between the showing and hidden states.

Was this section helpful?

Save Bar

Custom element

<ui-save-bar id="my-save-bar">
<button variant="primary" id="save-button"></button>
<button id="discard-button"></button>
</ui-save-bar>

<button onclick="document.getElementById('my-save-bar').show()">Show</button>

<script>
document.getElementById('save-button').addEventListener('click', () => {
console.log('Saving');
document.getElementById('my-save-bar').hide();
});

document.getElementById('discard-button').addEventListener('click', () => {
console.log('Discarding');
document.getElementById('my-save-bar').hide();
});
</script>

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-setting-the-loading-state-of-the-save-and-discard-buttonsSetting the loading state of the Save and Discard buttons

Setting the loading state of the Save and Discard buttons

Anchor to example-setting-the-disabled-state-of-the-save-and-discard-buttonsSetting the disabled state of the Save and Discard buttons

Setting the disabled state of the Save and Discard buttons

Anchor to example-showing-a-discard-confirmation-modalShowing a discard confirmation modal

Set the discardConfirmation attribute on the ui-save-bar element to show a confirmation modal after the user clicks the Discard button of the save bar

Was this section helpful?

Show the save bar

<ui-save-bar id="my-save-bar">
<button onclick="document.getElementById('my-save-bar').hide();"></button>
</ui-save-bar>

<button onclick="document.getElementById('my-save-bar').show()">Show</button>

Anchor to relatedRelated

APIsSave Bar
React ComponentsSaveBar Component