---
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_home
source_url:
  html: 'https://shopify.dev/docs/api/app-home/app-bridge-web-components/ui-save-bar'
  md: >-
    https://shopify.dev/docs/api/app-home/app-bridge-web-components/ui-save-bar.txt
---

# 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

* #### 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>
  ```

## Preview

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

## Examples

Save bar options, variations, and events

### Save bar controlled by the ui-save-bar element

Show the save bar

Control the save bar through show and hide instance methods

Setting the loading state of the Save and Discard buttons

Setting the loading state of the Save and Discard buttons

Setting the disabled state of the Save and Discard buttons

Setting the disabled state of the Save and Discard buttons

Showing 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

### Examples

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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar)

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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-bridge-library/react-components/savebar-component)

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