---
title: Modal
description: Displays content in an overlay that requires merchant attention. Use to present critical information, confirmations, or focused tasks without losing page context.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/modal
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/modal.md
---

# Modal

Displays content in an overlay that requires merchant attention. Use to present critical information, confirmations, or focused tasks without losing page context.

## Properties

* heading

  string

  A title that describes the content of the Modal.

* id

  string

  A unique identifier for the element.

## Slots

* primary-action

  HTMLElement

  The primary action button displayed in the modal.

  The tone of the button is used to define the tone of the modal.

  If omitted, the modal will default to an 'info' tone, and show an 'OK' button, translated according to the user's locale.

* secondary-actions

  HTMLElement

  The secondary action buttons displayed in the modal.

## Events

* hide

  (event: CallbackEvent<"s-modal">) => void

  Callback when the modal is hidden.

* show

  (event: CallbackEvent<"s-modal">) => void

  Callback when the modal is shown.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-button command="--show" commandFor="modal">
    Open modal
  </s-button>
  <s-modal id="modal" heading="Changes could not be saved">
    Please check your internet connection and try again.
    <s-button slot="primary-action">OK</s-button>
  </s-modal>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/modal-default.png)