# ui-save-bar
The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be controlled declaratively through the `ui-save-bar` element.
### Save Bar

```html
<ui-save-bar id="my-save-bar">
  <button variant="primary" id="save-button"></button>
  <button id="discard-button"></button>
</ui-save-bar>

<button onclick="document.getElementById('my-save-bar').show()">Show</button>

<script>
  document.getElementById('save-button').addEventListener('click', () => {
    console.log('Saving');
    document.getElementById('my-save-bar').hide();
  });

  document.getElementById('discard-button').addEventListener('click', () => {
    console.log('Discarding');
    document.getElementById('my-save-bar').hide();
  });
</script>

```


## ui-save-bar element
The `ui-save-bar` element 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/save-bar)
- [SaveBar Component](/docs/api/app-bridge-library/react-components/savebar-component)
## Examples
The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be controlled declaratively through the `ui-save-bar` element.
### Save bar controlled by the ui-save-bar element

### Show the save bar

```html
&lt;ui-save-bar id="my-save-bar"&gt;
  &lt;button onclick="document.getElementById('my-save-bar').hide();"&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```


### Setting the loading state of the Save and Discard buttons

```html
&lt;ui-save-bar id="my-save-bar"&gt;
  &lt;button variant="primary" loading&gt;&lt;/button&gt;
  &lt;button loading&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```


### Setting the disabled state of the Save and Discard buttons

```html
&lt;ui-save-bar id="my-save-bar"&gt;
  &lt;button variant="primary" disabled&gt;&lt;/button&gt;
  &lt;button disabled&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```


### Showing a discard confirmation modal

```html
&lt;ui-save-bar id="my-save-bar" discardConfirmation&gt;
  &lt;button onclick="document.getElementById('my-save-bar').hide();"&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```


## ui-save-bar instance
The `ui-save-bar` element provides instance methods to control the save bar.
### _UISaveBarElement

### addEventListener
Add 'show' | 'hide' event listeners.
### discardConfirmation
A getter/setter that is used to set discard confirmation.
### hide
Hides the save bar element.
### removeEventListener
Remove 'show' | 'hide' event listeners.
### show
Shows the save bar element.
### showing
A getter that is used to check if save bar is showing.
### toggle
Toggles the save bar element between the showing and hidden states.
## Related
- [Save Bar](/docs/api/app-bridge-library/apis/save-bar)
- [SaveBar Component](/docs/api/app-bridge-library/react-components/savebar-component)
## Examples
The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be controlled declaratively through the `ui-save-bar` element.
### Save bar controlled by the ui-save-bar element

### Show the save bar

```html
&lt;ui-save-bar id="my-save-bar"&gt;
  &lt;button onclick="document.getElementById('my-save-bar').hide();"&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```


### Setting the loading state of the Save and Discard buttons

```html
&lt;ui-save-bar id="my-save-bar"&gt;
  &lt;button variant="primary" loading&gt;&lt;/button&gt;
  &lt;button loading&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```


### Setting the disabled state of the Save and Discard buttons

```html
&lt;ui-save-bar id="my-save-bar"&gt;
  &lt;button variant="primary" disabled&gt;&lt;/button&gt;
  &lt;button disabled&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```


### Showing a discard confirmation modal

```html
&lt;ui-save-bar id="my-save-bar" discardConfirmation&gt;
  &lt;button onclick="document.getElementById('my-save-bar').hide();"&gt;&lt;/button&gt;
&lt;/ui-save-bar&gt;

&lt;button onclick="document.getElementById('my-save-bar').show()"&gt;Show&lt;/button&gt;

```