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

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

```

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

value: `UISaveBarChildren`

  - UISaveBarChildren: interface UISaveBarChildren {
  button?: {
    id?: string;
    class?: string;
    children?: string;
    disabled?: boolean;
    loading?: boolean;
    name?: string;
    onclick?: string;
    variant?: 'primary';
  };
}
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

value: `boolean`

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

### id

value: `string`

A unique identifier for the save bar

### UISaveBarChildren

### button

value: `{ id?: string; class?: string; children?: string; disabled?: boolean; loading?: boolean; name?: string; onclick?: string; variant?: "primary"; }`


## Related

- [Save Bar](https://shopify.dev/docs/api/app-bridge-library/apis/ui-save-bar)
- [ui-save-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar)
- [Modal](https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component)

## Examples

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 with different options

Setting the loading state of the Save and Discard buttons```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```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>
    </>
  );
}

```

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

```

## Examples

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 with different options

Setting the loading state of the Save and Discard buttons```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```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>
    </>
  );
}

```

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

```