---
title: Action API
description: >-
  The Action API provides modal presentation functionality for POS UI
  extensions, allowing you to launch full-screen modal interfaces from menu
  items, tiles, and block targets. The API enables navigation between different
  targets within your extension.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/action-api
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/action-api.md
---

# Action API

The Action API provides modal presentation functionality for POS UI extensions, allowing you to launch full-screen modal interfaces from menu items, tiles, and block targets. The API enables navigation between different targets within your extension.

## ActionApi

The `ActionApi` object provides methods for presenting modal interfaces. Access these methods through `shopify.action` to launch full-screen modal experiences.

* presentModal

  () => void

  required

  Presents the corresponding action (modal) target on top of the current view as a full-screen modal. For example, calling this method from `pos.purchase.post.action.menu-item.render` presents `pos.purchase.post.action.render`. Use to launch detailed workflows, complex forms, or multi-step processes that require more screen space than simple components provide.

## Best practices

* **Use modals for complex workflows:** Reserve modals for operations that genuinely require more screen space, multiple steps, or complex interactions that can't be handled by simple button actions.
* **Provide clear entry points:** Use descriptive button labels and titles that clearly indicate what the modal will contain or what action it will perform, helping users understand what to expect.
* **Handle modal dismissal gracefully:** Ensure your modal-based workflows handle user dismissal, saving progress when possible and providing clear feedback about incomplete operations.

## Limitations

The `presentModal()` method must be called from a user interaction (such as a button click or tile tap) and can't be invoked programmatically during extension initialization or from background operations.

## Examples

Learn how to present full-screen modals from tiles and menu items using the Action API.

### Examples

* #### Open a modal from a post-purchase action

  ##### Description

  Present a full-screen modal from menu item actions in detail screens. This example shows how to use \`shopify.action.presentModal()\` to launch a modal workflow from post-purchase, order details, or other action menu item contexts. With this pattern, you can implement complex, multi-step operations.

  ##### jsx

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

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

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

* #### Open a modal from a smart grid tile

  ##### Description

  Present a full-screen modal from smart grid tiles on the POS home screen. This example demonstrates using \`shopify.action.presentModal()\` to launch modal workflows from tile interactions. This pattern is well-suited for high-frequency tasks that require additional UI beyond the tile itself.

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