App Bridge Ui
UiSaveBar
Contextual save/discard bar. Wraps the App Bridge <ui-save-bar> web component.
Usage
<script setup>
const shopify = useAppBridge()
function onFormChange() {
shopify.saveBar.show('my-save-bar')
}
function handleSave() {
// ...save logic
shopify.saveBar.hide('my-save-bar')
}
function handleDiscard() {
shopify.saveBar.hide('my-save-bar')
}
</script>
<template>
<ShUiSaveBar
id="my-save-bar"
discard-confirmation
:primary-action="{ label: 'Save', onClick: handleSave }"
:secondary-action="{ label: 'Discard', onClick: handleDiscard }"
/>
</template>
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | Yes | — | Unique identifier |
discardConfirmation | boolean | No | — | Show confirmation dialog on discard |
primaryAction | SaveBarAction | No | — | Primary (save) button |
secondaryAction | SaveBarAction | No | — | Secondary (discard) button |
interface SaveBarAction {
label: string
onClick: () => void
}
Events
| Event | Payload | Description |
|---|---|---|
show | Event | Emitted when the save bar appears |
hide | Event | Emitted when the save bar is dismissed |
App Bridge API
| Method | Description |
|---|---|
shopify.saveBar.show(id) | Shows the save bar |
shopify.saveBar.hide(id) | Hides the save bar |
shopify.saveBar.toggle(id) | Toggles save bar visibility |
shopify.saveBar.leaveConfirmation() | Prompts confirmation before leaving with unsaved changes |
App Bridge Element
Renders as <ui-save-bar>. See App Bridge SaveBar docs.