ActionItem

ActionItem has been deprecated. Please use the [Button Component](/docs/api/pos-ui-extensions/components/) instead. 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.

Render an ActionItem in post purchase

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

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

ActionItemProps

Renders an `ActionItem` on action targets. Note that the text displayed on this `ActionItem` is dependent on the description of the extension.

enabled

Sets whether or not the `ActionItem` can be tapped.

onPress

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