SaveBar Component

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.

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

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.

_UISaveBarAttributes

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.

discardConfirmation

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

id

A unique identifier for the save bar

UISaveBarChildren

button

Examples

SaveBar with different options

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

Setting the disabled 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" disabled></button>
        <button disabled></button>
      </SaveBar>
    </>
  );
}

Showing a discard confirmation modal

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

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

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

SaveBar Component

SaveBar