# Modal

Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`).

The library takes care of applying the WAI-ARIA Dialog pattern automatically for the activator and the modal content.

```tsx
import {
  reactExtension,
  useApi,
  Button,
  Link,
  Modal,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const {ui} = useApi();

  return (
    <Link
      overlay={
        <Modal
          id="my-modal"
          padding
          title="Return policy"
        >
          <TextBlock>
            We have a 30-day return policy, which
            means you have 30 days after receiving
            your item to request a return.
          </TextBlock>
          <TextBlock>
            To be eligible for a return, your item
            must be in the same condition that you
            received it, unworn or unused, with
            tags, and in its original packaging.
            You’ll also need the receipt or proof
            of purchase.
          </TextBlock>
          <Button
            onPress={() =>
              ui.overlay.close('my-modal')
            }
          >
            Close
          </Button>
        </Modal>
      }
    >
      Return policy
    </Link>
  );
}

```

```js
import {
  extension,
  Button,
  Link,
  Modal,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root, {ui}) => {
  const modalFragment = root.createFragment();
  const modal = root.createComponent(
    Modal,
    {id: 'my-modal', title: 'Return policy', padding: true},
    [
      root.createComponent(
        TextBlock,
        undefined,
        'We have a 30-day return policy, which means you have 30 days after receiving your item to request a return.',
      ),
      root.createComponent(
        TextBlock,
        undefined,
        'To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase.',
      ),
      root.createComponent(
        Button,
        {
          onPress() {
            ui.overlay.close('my-modal');
          },
        },
        'Close',
      ),
    ],
  );
  modalFragment.appendChild(modal);
  const link = root.createComponent(
    Link,
    {overlay: modalFragment},
    'Return policy',
  );

  root.appendChild(link);
});

```

## ModalProps

### ModalProps

### id

value: `string`

A unique identifier for the Modal. When no `id` is set,
a globally unique value will be used instead.

### onClose

value: `() => void`

Callback when the modal is closed. That is when either the close button, the backdrop,
or the `escape` key are pressed.

### onOpen

value: `() => void`

Callback when the modal is opened. This is called at the beginning of the transition
that opens the modal.

### title

value: `string`

A title rendered at the top of the modal.

### accessibilityLabel

value: `string`

A label to describe the purpose of the modal that is announced by screen readers.
If not set, it will use the value of `title`.

### padding

value: `boolean`

Adds a default spacing around both header (which holds the `title`) and content of the modal.