---
title: Action API
description: >-
  The Action API allows an action extension to modally present its corresponding
  modal target.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/action-api'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/action-api.md'
---

# Action APIAPIs

Requires pos.home.tile.render

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

## Action

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

### Examples

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

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

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