Modal

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to 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.

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();

});

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 />),

);

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();
});

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 />),
);

Anchor to PropsProps

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.

Anchor to DestructableActionDestructableAction

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

Anchor to GuidelinesGuidelines

✅ 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.

Was this page helpful?