---
title: ActionItem
description: >-
  The ActionItem provides a tappable surface on the specified extension target
  as an entry point to an extension. Note that the text displayed on this
  ActionItem is dependent on the description of the extension.
api_version: 2024-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/actionitem
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/actionitem.md
---

# Action​Item

The ActionItem provides a tappable surface on the specified extension target as an entry point to an extension. Note that the text displayed on this ActionItem is dependent on the description of the extension.

### Support Targets (11)

### Supported targets

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

#### Use cases

* **Custom workflows:** Launch workflows like sending receipts through messaging apps or non-standard channels.
* **Quick shortcuts:** Create shortcuts for multi-step workflows like adding gifts or applying VIP discounts.
* **Data collection:** Launch modals to collect additional customer information.
* **Third-party integrations:** Launch custom interfaces for external system integrations.

## Examples

### Show a post-purchase action menu item

Display an action menu item in the post-purchase flow. This example shows how to render an ActionItem that appears in action menus, providing merchants with a tappable entry point to launch your extension after a transaction is completed.

## Show a post-purchase action menu item

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2024-04/action-item-default-DhHvAXPm.png)

### Examples

* #### Show a post-purchase action menu item

  ##### Description

  Display an action menu item in the post-purchase flow. This example shows how to render an ActionItem that appears in action menus, providing merchants with a tappable entry point to launch your extension after a transaction is completed.

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

## ActionItem

* **onPress**

  **() => void**

  **required**

  The callback that is executed when the user taps the ActionItem.

* **enabled**

  **boolean**

  Sets whether or not the ActionItem can be tapped.

## Best practices

* **Control availability with enabled state:** Use the `enabled` property to control when a component can be tapped based on context. Set a component's `enabled` property to `false` when the extension's functionality isn't applicable to the current state. For example, if your extension applies a discount for new customers, set `enable` to `false` when processing a purchase for an existing customer.
* **Maintain consistent interaction patterns:** Follow established POS interaction patterns by using ActionItem components primarily with the `api.action.presentModal()` method as entry points to modal workflows. This creates predictable user experiences that align with merchant expectations and standard POS behaviors.
* **Handle errors and edge cases:** Implement proper error handling in `onPress` callbacks to manage network failures, invalid data states, or other exceptional conditions. Provide meaningful feedback to merchants when operations cannot be completed.

## Limitations

* ActionItem components can only be used within supported action menu-item targets. They can't be rendered in action (modal) or block targets.
* Multiple ActionItem components from the same app can't be rendered simultaneously on the same target. Each extension can only contribute one ActionItem for each supported target.