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

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

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/action-item-default.png)

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