Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension.

Choose a version:

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.

Anchor to Use casesUse 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 (13)

Supported targets

Anchor to PropertiesProperties

The Action API object provides modal presentation functionality for POS UI extensions. Access the following properties on the API object to launch full-screen modal interfaces from menu items, tiles, and block targets.

Anchor to presentModal 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

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 />,

);

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

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

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

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

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

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

Anchor to Best practicesBest 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.

Anchor to LimitationsLimitations

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.

Was this page helpful?