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

_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.
```
UISaveBarChildren
```
discardConfirmation
Whether to show a confirmation dialog when the discard button is clicked
```
boolean
```
id
A unique identifier for the save bar
```
string
```

interface _UISaveBarAttributes {
  /**
   * A unique identifier for the save bar
   */
  id?: string;
  /**
   * Whether to show a confirmation dialog when the discard button is clicked
   */
  discardConfirmation?: boolean;
  /**
   * 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.
   */
  children?: UISaveBarChildren;
}

UISaveBarChildren

button

{ id?: string; class?: string; children?: string; disabled?: boolean; loading?: boolean; name?: string; onclick?: string; variant?: "primary"; }

interface UISaveBarChildren {
  button?: {
    id?: string;
    class?: string;
    children?: string;
    disabled?: boolean;
    loading?: boolean;
    name?: string;
    onclick?: string;
    variant?: 'primary';
  };
}

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.

_UISaveBarElement

addEventListener

Add 'show' | 'hide' event listeners.

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

discardConfirmation
A getter/setter that is used to set discard confirmation.
```
boolean
```
hide
Hides the save bar element.
```
() => Promise<void>
```

removeEventListener

Remove 'show' | 'hide' event listeners.

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

show
Shows the save bar element.
```
() => Promise<void>
```
showing
A getter that is used to check if save bar is showing.
```
boolean
```
toggle
Toggles the save bar element between the showing and hidden states.
```
() => Promise<void>
```

interface _UISaveBarElement {
  /**
   * A getter/setter that is used to set discard confirmation.
   */
  discardConfirmation?: boolean;
  /**
   * A getter that is used to check if save bar is showing.
   */
  readonly showing?: boolean;
  /**
   * Shows the save bar element.
   */
  show?(): Promise<void>;
  /**
   * Hides the save bar element.
   */
  hide?(): Promise<void>;
  /**
   * Toggles the save bar element between the showing and hidden states.
   */
  toggle?(): Promise<void>;
  /**
   * Add 'show' | 'hide' event listeners.
   * @param type An event name
   * @param listener A callback triggered when the event name happens
   */
  addEventListener?(
    type: 'show' | 'hide',
    listener: EventListenerOrEventListenerObject,
  ): void;
  /**
   * Remove 'show' | 'hide' event listeners.
   * @param type An event name
   * @param listener A callback to be removed
   */
  removeEventListener?(
    type: 'show' | 'hide',
    listener: EventListenerOrEventListenerObject,
  ): void;
}

Was this section helpful?

Save Bar

Custom element

<ui-save-bar id="my-save-bar">

</ui-save-bar>

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>

examples

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

Was this section helpful?

Show the save bar

<ui-save-bar id="my-save-bar">

</ui-save-bar>

examples

Show the save bar

description

Control the save bar through show and hide instance methods

<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

description

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

description

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

description

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

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

Anchor to relatedRelated

APIsSave Bar

React ComponentsSaveBar Component