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

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` prop on the `SaveBar` component to show a confirmation modal after the user clicks the Discard button of the save bar

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

Showing the save bar with the saveBar API

Showing the save bar with the saveBar API

Showing the save bar with the open prop

Showing the save bar with the open prop

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

[![](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/ui-save-bar)

[APIsSave Bar](https://shopify.dev/docs/api/app-bridge-library/apis/ui-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/web-components/ui-save-bar)

[Web Componentsui-save-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-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/modal-component)

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