---
title: ui-save-bar
description: >-
  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.
api_name: app-bridge-library
source_url:
  html: 'https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar'
  md: >-
    https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar.md
---

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

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

* children

  UISaveBarChildren

  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

  boolean

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

* id

  string

  A unique identifier for the save bar

### UISaveBarChildren

* button

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

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

## ui-save-bar instance

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

* addEventListener

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

  Add 'show' | 'hide' event listeners.

* discardConfirmation

  boolean

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

* hide

  () => Promise\<void>

  Hides the save bar element.

* removeEventListener

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

  Remove 'show' | 'hide' event listeners.

* show

  () => Promise\<void>

  Shows the save bar element.

* showing

  boolean

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

* toggle

  () => Promise\<void>

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

Examples

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/app-bridge-library/contextual-save-bar.png)

### Examples

* #### Save Bar

  ##### Custom element

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

* #### Show the save bar

  ##### Description

  Control the save bar through show and hide instance methods

  ##### Default

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

  ##### Default

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

  ##### Default

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

  ##### Default

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

## Related

[APIs - Save Bar](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar)

[React Components - SaveBar Component](https://shopify.dev/docs/api/app-bridge-library/react-components/savebar-component)