---
title: Action API
description: |
  
  The Action API allows an action extension to modally present its corresponding modal target.

  #### Supporting targets
  - [pos.home.tile.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render)
  - [pos.purchase.post.action.menu-item.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render)
  - [pos.purchase.post.block.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render)
  - [pos.order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render)
  - [pos.order-details.block.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render)
  - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render)
  - [pos.product-details.block.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-block-render)
  - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)
  - [pos.customer-details.block.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render)
  - [pos.draft-order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render)
  - [pos.draft-order-details.block.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/apis/action-api
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/apis/action-api.md
---

# Action APIAPIs

The Action API allows an action extension to modally present its corresponding modal target.

#### Supporting targets

* [pos.home.tile.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render)
* [pos.purchase.post.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render)
* [pos.purchase.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render)
* [pos.order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render)
* [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render)
* [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render)
* [pos.product-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-block-render)
* [pos.customer-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)
* [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render)
* [pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render)
* [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)

## ActionApi

* presentModal

  () => void

  required

  Presents the `action-overlay.render` extension target on top of present view.

  For example: if we are calling presentModal() from pos.purchase.post.action.menu-item.render, it should present pos.purchase.post.action.render.

## Examples

Examples of using the Action API.

Present a modal from post purchase.

Present a modal from smart grid.

### Examples

* #### Present a modal from post purchase.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    return (
      <s-button
        onClick={() => {
          shopify.action.presentModal();
        }}
      />
    );
  };
  ```

* #### Present a modal from smart grid.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    return (
      <s-tile
        heading="My App"
        subheading="Present modal from tile"
        onClick={() => {
          shopify.action.presentModal();
        }}
      />
    );
  };
  ```