---
title: Modal Component
description: >-
  The Modal API allows you to display an overlay that prevents interaction with
  the rest of the app until dismissed.

   It is used by customizing your Modal content with the `Modal` component and then opening it with the `shopify.modal.show('modal-id')` API.
api_name: app-bridge-library
source_url:
  html: >-
    https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component
  md: >-
    https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component.md
---

# Modal Component

Requires [`@shopify/app-bridge-react@v4`](https://www.npmjs.com/package/@shopify/app-bridge-react) and the [`app-bridge.js` script tag](https://shopify.dev/docs/api/app-bridge-library#getting-started)

The Modal API allows you to display an overlay that prevents interaction with the rest of the app until dismissed.

It is used by customizing your Modal content with the `Modal` component and then opening it with the `shopify.modal.show('modal-id')` API.

## Modal component

The `Modal` component is available for use in your app. It configures a Modal to display in the Shopify Admin.

The content you provide can be simple React elements or a `src` prop with a URL that will be loaded.

* children

  HTMLCollection & UITitleBarAttributes

  The content to display within a Modal. You can provide a single HTML element with children and the [ui-title-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar) element to configure the Modal title bar.

* id

  string

  A unique identifier for the Modal

* src

  string

  The URL of the content to display within a Modal. If provided, the Modal will display the content from the provided URL and any children other than the [ui-title-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar) and [ui-save-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar) elements will be ignored.

* variant

  'small' | 'base' | 'large' | 'max'

  Default: "base"

  The size of the modal.

  Before the Modal is shown, this can be changed to any of the provided values. After the Modal is shown, this can can only be changed between `small`, `base`, and `large`.

### UITitleBarAttributes

* children

  The children of the title bar.

  ```ts
  any
  ```

* title

  The title of the title bar. Can also be set via \<code>document.title\</code>.

  ```ts
  string
  ```

```ts
export interface UITitleBarAttributes extends _UITitleBarAttributes {
  children?: any;
}
```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/app-bridge-library/modal.png)

## Examples

Modal options, variations, and events

### Modals with different options

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/app-bridge-library/modal-max.png)

### Modal events

### Modal controls

### Using a src URL to load content

## Related

[APIs - Modal](https://shopify.dev/docs/api/app-bridge-library/apis/modal)

[Web Components - ui-modal](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal)

[Hook - useAppBridge](https://shopify.dev/docs/api/app-bridge-library/react-hooks/useappbridge)

[React Components - TitleBar](https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar-component)

[React Components - SaveBar](https://shopify.dev/docs/api/app-bridge-library/react-components/savebar-component)