Modal

In-iframe modal dialog. Wraps the Polaris <s-modal> web component.

Usage

Open and close with command / commandFor attributes:

<template>
  <ShButton command-for="my-modal" command="--show">Open</ShButton>

  <ShModal id="my-modal" heading="Confirm action">
    <ShParagraph>Are you sure?</ShParagraph>

    <ShButton slot="secondary-actions" command-for="my-modal" command="--hide">
      Cancel
    </ShButton>
    <ShButton
      slot="primary-action"
      variant="primary"
      command-for="my-modal"
      command="--hide"
    >
      Confirm
    </ShButton>
  </ShModal>
</template>

Or control programmatically via the Modal API:

const shopify = useAppBridge()
shopify.modal.show('my-modal')
shopify.modal.hide('my-modal')
shopify.modal.toggle('my-modal')

ShModal renders inside your app's iframe. For a full-screen modal outside the iframe, use ShUiModal.

Props

Prop	Type	Required	Default	Description
`id`	`string`	Yes	—	Modal identifier
`heading`	`string`	No	—	Modal heading
`accessibilityLabel`	`string`	No	—	Accessible label
`padding`	`'base' \| 'none'`	No	—	Modal content padding
`size`	`'small' \| 'small-100' \| 'base' \| 'large' \| 'large-100'`	No	—	Modal size

Slots

Slot	Description
`default`	Modal body content
`primary-action`	Primary action button
`secondary-actions`	Secondary action button(s)

Polaris Element

Renders as <s-modal>. See Polaris Modal docs.

Edit this pageorReport an issue

UnorderedList

Unordered (bullet) list. Wraps the Polaris <s-unordered-list> web component.

QueryContainer

Query container for responsive layouts. Wraps the Polaris <s-query-container> web component.