---
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.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-01
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-01/apis/action-api'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-01/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.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.

  ##### React

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

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

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

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

  ##### TS

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

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

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

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

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