---
title: pos.draft-order-details.action.menu-item.render
description: >-
  Renders a single interactive button component as a menu item in the draft
  order details action menu. Use this target for draft order-specific operations
  like sending invoices, updating payment status, or launching custom workflow
  processes for pending orders.


  Extensions at this target can access draft order information including order
  ID, name, and associated customer through the Draft Order API. Menu items
  typically invoke `api.action.presentModal()` to launch the companion modal for
  complete draft order workflows.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/draft-order-details/pos-draft-order-details-action-menu-item-render
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/draft-order-details/pos-draft-order-details-action-menu-item-render.md
---

# pos.​draft-order-details.​action.​menu-item.​render

Renders a single interactive button component as a menu item in the draft order details action menu. Use this target for draft order-specific operations like sending invoices, updating payment status, or launching custom workflow processes for pending orders.

Extensions at this target can access draft order information including order ID, name, and associated customer through the Draft Order API. Menu items typically invoke `api.action.presentModal()` to launch the companion modal for complete draft order workflows.

### Examples

* #### Create a draft order details action menu item

  ##### Description

  Add an interactive menu item to the draft order details action menu for draft order-specific operations. This example shows how to create a menu item that accesses draft order information and launches modal workflows for tasks like sending invoices, updating payment status, or custom order processes.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    Button,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const ButtonComponent = () => {
    const api = useApi<'pos.draft-order-details.action.menu-item.render'>();

    return <Button onPress={() => api.action.presentModal()} />;
  };

  export default reactExtension(
    'pos.draft-order-details.action.menu-item.render',
    () => <ButtonComponent />,
  );
  ```

  ##### TS

  ```ts
  import {Button, extension} from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.draft-order-details.action.menu-item.render',
    (root, api) => {
      const button = root.createComponent(Button, {
        onPress: () => {
          api.action.presentModal();
        },
      });

      root.append(button);
    },
  );
  ```