---
title: SaveBar Component
description: >-
  The Save Bar API is used to indicate that a form on the current page has
  unsaved information. It can be used in 2 ways:


  1. It is automatically configured when you provide the
  <code>data-save-bar</code> attribute to a [<code>form</code>
  element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) and
  will display the save bar when there are unsaved changes. For more
  information, refer to the [save bar
  API](/docs/api/app-bridge-library/apis/save-bar).

  2. It can be controlled declaratively through the `SaveBar` component.
api_name: app-bridge-library
source_url:
  html: >-
    https://shopify.dev/docs/api/app-bridge-library/react-components/savebar-component
  md: >-
    https://shopify.dev/docs/api/app-bridge-library/react-components/savebar-component.md
---

# Save​Bar Component

Requires [`@shopify/app-bridge-react@v4`](https://www.npmjs.com/package/@shopify/app-bridge-react) and the [`app-bridge.js` script tag](https://shopify.dev/docs/api/app-bridge-library#getting-started)

The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be used in 2 ways:

1. It is automatically configured when you provide the `data-save-bar` attribute to a [`form` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) and will display the save bar when there are unsaved changes. For more information, refer to the [save bar API](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar).
2. It can be controlled declaratively through the `SaveBar` component.

## SaveBar component

The `SaveBar` component 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';
  };
}
```

### Examples

* #### SaveBar

  ##### Default

  ```jsx
  import {SaveBar} from '@shopify/app-bridge-react';

  export function MyApp() {
    const shopify = useAppBridge();

    const handleSave = () => {
      console.log('Saving');
      shopify.saveBar.hide('my-save-bar');
    };

    const handleDiscard = () => {
      console.log('Discarding');
      shopify.saveBar.hide('my-save-bar');
    };

    return (
      <>
        <button onClick={() => shopify.saveBar.show('my-save-bar')}>
          Show Save Bar
        </button>
        <SaveBar id="my-save-bar">
          <button variant="primary" onClick={handleSave}></button>
          <button onClick={handleDiscard}></button>
        </SaveBar>
      </>
    );
  }
  ```

## Preview

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

## Examples

Save bar options, variations, and events

### SaveBar with different options

### Examples

* #### Setting the loading state of the Save and Discard buttons

  ##### Description

  Setting the loading state of the Save and Discard buttons

  ##### Default

  ```jsx
  import {SaveBar} from '@shopify/app-bridge-react';

  export function MyApp() {
    const shopify = useAppBridge();

    return (
      <>
        <button onClick={() => shopify.saveBar.show('my-save-bar')}>
          Show Save Bar
        </button>
        <SaveBar id="my-save-bar">
          <button variant="primary" loading=""></button>
          <button loading=""></button>
        </SaveBar>
      </>
    );
  }
  ```

* #### Setting the disabled state of the Save and Discard buttons

  ##### Description

  Setting the disabled state of the Save and Discard buttons

  ##### Default

  ```jsx
  import {SaveBar} from '@shopify/app-bridge-react';

  export function MyApp() {
    const shopify = useAppBridge();

    return (
      <>
        <button onClick={() => shopify.saveBar.show('my-save-bar')}>
          Show Save Bar
        </button>
        <SaveBar id="my-save-bar">
          <button variant="primary" disabled></button>
          <button disabled></button>
        </SaveBar>
      </>
    );
  }
  ```

* #### Showing a discard confirmation modal

  ##### Description

  Set the \`discardConfirmation\` prop on the \`SaveBar\` component to show a confirmation modal after the user clicks the Discard button of the save bar

  ##### Default

  ```jsx
  import {SaveBar} from '@shopify/app-bridge-react';

  export function MyApp() {
    const shopify = useAppBridge();

    const handleDiscard = () => {
      shopify.saveBar.hide('my-save-bar');
    };

    return (
      <>
        <button onClick={() => shopify.saveBar.show('my-save-bar')}>
          Show Save Bar
        </button>
        <SaveBar id="my-save-bar" discardConfirmation>
          <button onClick={handleDiscard}></button>
        </SaveBar>
      </>
    );
  }
  ```

### SaveBar controls

### Examples

* #### Showing the save bar with the saveBar API

  ##### Description

  Showing the save bar with the saveBar API

  ##### Default

  ```jsx
  import {SaveBar} from '@shopify/app-bridge-react';

  export function MyApp() {
    const shopify = useAppBridge();

    return (
      <>
        <button onClick={() => shopify.saveBar.show('my-save-bar')}>
          Show Save Bar
        </button>
        <button onClick={() => shopify.saveBar.hide('my-save-bar')}>
          Hide Save Bar
        </button>
        <SaveBar id="my-save-bar"></SaveBar>
      </>
    );
  }
  ```

* #### Showing the save bar with the open prop

  ##### Description

  Showing the save bar with the open prop

  ##### Default

  ```jsx
  import {useState} from 'react';
  import {SaveBar} from '@shopify/app-bridge-react';

  export function MyModal() {
    const [saveBarOpen, setSaveBarOpen] = useState(false);

    return (
      <>
        <button onClick={() => setSaveBarOpen(true)}>Show Save Bar</button>
        <SaveBar id="my-save-bar" open={saveBarOpen}>
          <button onClick={() => setSaveBarOpen(false)}></button>
        </SaveBar>
      </>
    );
  }
  ```

## Related

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

[Web Components - ui-save-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar)

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