---
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: 2024-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/target-apis/standard-apis/action-api
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/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.

#### Use cases

* **Modal workflows:** Launch workflows from menu item buttons or tile interfaces.
* **Multi-step processes:** Create processes requiring more screen space than basic components allow.
* **Data entry:** Implement modal-based forms or configuration interfaces.
* **Wizard interfaces:** Build wizard-style interfaces guiding users through complex operations.

### Support Targets (11)

### Supported targets

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

## Properties

The `ActionApi` object provides properties for presenting modal interfaces. Access these properties through `api.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.

Examples

### Examples

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

  ##### Description

  Create an action menu item that appears after a purchase is completed. When pressed, it launches a full-screen modal view using the Action API's \`presentModal()\` method, allowing you to display custom workflows or additional functionality in the post-purchase flow.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    useApi,
    ActionItem,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const PostPurchaseActionItem = () => {
    const api = useApi<'pos.purchase.post.action.menu-item.render'>();

    return (
      <ActionItem
        onPress={() => api.action.presentModal()}
        enabled
      />
    );
  };

  export default reactExtension(
    'pos.purchase.post.action.menu-item.render',
    () => <PostPurchaseActionItem />
  );
  ```

  ##### TS

  ```ts
  import {ActionItem, extension} from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.purchase.post.action.menu-item.render',
    (root, api) => {
      const actionItem = root.createComponent(ActionItem, {
        onPress: () => api.action.presentModal(),
        enabled: true,
      });

      root.append(actionItem);
    },
  );
  ```

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

  ##### Description

  Create a smart grid tile on the POS home screen that launches a full-screen modal when tapped. This example shows how to use the Action API to present detailed views or workflows from your app's home tile, providing quick access to extended functionality.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    useApi,
    Tile,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile
        title='My App'
        onPress={() => api.action.presentModal()}
        enabled
      />
    );
  };

  export default reactExtension(
    'pos.home.tile.render',
    () => <SmartGridTile />
  );
  ```

  ##### TS

  ```ts
  import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.home.tile.render', (root, api) => {
    const tile = root.createComponent(Tile, {
      title: 'Action API',
      onPress: () => api.action.presentModal(),
      enabled: true,
    });

    root.append(tile);
  });
  ```

## Best practices

* **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

Each extension can only present one modal at a time. Subsequent calls to `presentModal()` while a modal is already open may be ignored or replace the current modal.