---
title: Modal
description: >-
  Modals are overlays that prevent merchants from interacting with the rest of
  the application until a specific action is taken.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/modal
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/modal.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/modal.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/modal.md#guidelines)

# Modal

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Modals are overlays that prevent merchants from interacting with the rest of the application until a specific action is taken.

Modals are disruptive by design, requiring merchants to take an action before they can continue, so use them thoughtfully and sparingly.

##### JavaScript

```ts
import {extend, Modal} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const modal = root.createComponent(Modal, {
    title: 'The best modal',
    onClose: () => console.log('modal closed!'),
    open: true,
  });

  modal.appendChild('This is the content of the modal.');
  root.appendChild(modal);

  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, Modal} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Modal open title="The best modal" onClose={() => console.log('modal closed!')}>
      This is the content of the modal.
    </Modal>
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| open | `boolean` | Whether the modal is open. |
| title | `string` | Title content for the modal, when rendered. |
| primaryAction? | `DestructableAction` | Modal's primary action, ie 'Save' or 'Accept'. |
| secondaryActions? | `DestructableAction[]` | Modal's secondary action(s), ie 'Cancel'. |
| onClose | `() => void` | Callback when the modal is closed. |

### Destructable​Action

| Name | Type | Description |
| - | - | - |
| content | `string` | Action label text. |
| onAction? | `() => void` | Callback for the action. |
| destructive? | `boolean` | Indicates a dangerous or potentially negative action. |

***

## Guidelines

| ✅ Do | 🛑 Don't |
| - | - |
| Use modals thoughtfully and sparingly | Avoid overly complex or multi-step content |
| Use modals with a small and simple set of actions to complete | |

For more guidelines, refer to Polaris' [Modal best practices](https://polaris.shopify.com/components/overlays/modal#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/modal.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/modal.md#guidelines)