Skip to main content

SaveBar Component

Requires @shopify/app-bridge-react@v4 and the app-bridge.js script tag

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 and will display the save bar when there are unsaved changes. For more information, refer to the save bar API.
  2. It can be controlled declaratively through the SaveBar component.

Anchor to savebar componentSaveBar 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.

Anchor to children
children

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.

Anchor to discardConfirmation
discardConfirmation
boolean

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

Anchor to id
id
string

A unique identifier for the save bar

Was this section helpful?

SaveBar

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

Anchor to examplesExamples

Save bar options, variations, and events

Anchor to example-savebar-with-different-optionsSaveBar with different options

Anchor to example-setting-the-loading-state-of-the-save-and-discard-buttonsSetting the loading state of the Save and Discard buttons

Setting the loading state of the Save and Discard buttons

Anchor to example-setting-the-disabled-state-of-the-save-and-discard-buttonsSetting the disabled state of the Save and Discard buttons

Setting the disabled state of the Save and Discard buttons

Anchor to example-showing-a-discard-confirmation-modalShowing 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

Was this section helpful?

Setting the loading state of the Save and Discard buttons

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>
</>
);
}

Anchor to example-savebar-controlsSaveBar controls

Anchor to example-showing-the-save-bar-with-the-savebar-apiShowing the save bar with the saveBar API

Showing the save bar with the saveBar API

Anchor to example-showing-the-save-bar-with-the-open-propShowing the save bar with the open prop

Showing the save bar with the open prop

Was this section helpful?

Showing the save bar with the saveBar API

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>
</>
);
}

Anchor to relatedRelated

APIsSave Bar
Web Componentsui-save-bar
React ComponentsModal