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.

Save Bar

<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>

ui-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.

_UISaveBarAttributes

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.

discardConfirmation

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

id

A unique identifier for the save bar

UISaveBarChildren

button

ui-save-bar instance

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

_UISaveBarElement

addEventListener

Add 'show' | 'hide' event listeners.

discardConfirmation

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

hide

Hides the save bar element.

removeEventListener

Remove 'show' | 'hide' event listeners.

show

Shows the save bar element.

showing

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

toggle

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

Related

  • Save Bar
  • SaveBar Component

Examples

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.

Save bar controlled by the ui-save-bar element

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>

Setting the loading state of the Save and Discard buttons

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

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

Setting the disabled state of the Save and Discard buttons

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

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

Showing a discard confirmation modal

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

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