UiTitleBar

Admin page title bar with action buttons. Wraps the App Bridge <ui-title-bar> web component.

Usage

<script setup>
function handleCreate() { /* ... */ }
function handleExport() { /* ... */ }
</script>

<template>
  <ShUiTitleBar
    title="Products"
    :primary-action="{ label: 'Create product', onClick: handleCreate }"
    :actions="[
      { label: 'Export', onClick: handleExport },
    ]"
  />
</template>

With a breadcrumb (back button):

<template>
  <ShUiTitleBar
    title="Edit Product"
    :primary-action="{ label: 'Save', onClick: handleSave }"
    :breadcrumb="{ label: 'Products', onClick: () => navigateTo('/products') }"
  />
</template>

Props

Prop	Type	Default	Description
`title`	`string`	—	Title displayed in the Admin bar
`primaryAction`	`TitleBarAction`	—	Primary action button (highlighted)
`breadcrumb`	`Omit<TitleBarAction, 'disabled'>`	—	Back button / breadcrumb
`actions`	`TitleBarAction[]`	—	Additional action buttons

interface TitleBarAction {
  label: string
  disabled?: boolean
  onClick: () => void
}

Notes

Unlike the raw <ui-title-bar> web component (which uses <button> children), <ShUiTitleBar> uses typed props with onClick callbacks for full TypeScript support.
Renders native <button> children from the action props internally.

App Bridge Element

Renders as <ui-title-bar>. See App Bridge TitleBar docs.

Edit this pageorReport an issue

UiModal

Full-screen modal outside the iframe. Wraps the App Bridge <ui-modal> web component.

UiSaveBar

Contextual save/discard bar. Wraps the App Bridge <ui-save-bar> web component.