# 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

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

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

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

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

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

```


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

## Related
- [Save Bar](/docs/api/app-bridge-library/apis/ui-save-bar)
- [ui-save-bar](/docs/api/app-bridge-library/web-components/ui-save-bar)
- [Modal](/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 <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 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 (
    &lt;&gt;
      &lt;button onClick={() =&gt; shopify.saveBar.show('my-save-bar')}&gt;
        Show Save Bar
      &lt;/button&gt;
      &lt;SaveBar id="my-save-bar"&gt;
        &lt;button variant="primary" loading=""&gt;&lt;/button&gt;
        &lt;button loading=""&gt;&lt;/button&gt;
      &lt;/SaveBar&gt;
    &lt;/&gt;
  );
}

```


### 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 (
    &lt;&gt;
      &lt;button onClick={() =&gt; shopify.saveBar.show('my-save-bar')}&gt;
        Show Save Bar
      &lt;/button&gt;
      &lt;SaveBar id="my-save-bar"&gt;
        &lt;button variant="primary" disabled&gt;&lt;/button&gt;
        &lt;button disabled&gt;&lt;/button&gt;
      &lt;/SaveBar&gt;
    &lt;/&gt;
  );
}

```


### Showing a discard confirmation modal

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

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

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

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

```


### 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 (
    &lt;&gt;
      &lt;button onClick={() =&gt; shopify.saveBar.show('my-save-bar')}&gt;
        Show Save Bar
      &lt;/button&gt;
      &lt;button onClick={() =&gt; shopify.saveBar.hide('my-save-bar')}&gt;
        Hide Save Bar
      &lt;/button&gt;
      &lt;SaveBar id="my-save-bar"&gt;&lt;/SaveBar&gt;
    &lt;/&gt;
  );
}

```


### 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 (
    &lt;&gt;
      &lt;button onClick={() =&gt; setSaveBarOpen(true)}&gt;Show Save Bar&lt;/button&gt;
      &lt;SaveBar id="my-save-bar" open={saveBarOpen}&gt;
        &lt;button onClick={() =&gt; setSaveBarOpen(false)}&gt;&lt;/button&gt;
      &lt;/SaveBar&gt;
    &lt;/&gt;
  );
}

```