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

## Preview

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

## Examples

Save bar options, variations, and events

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

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