---
title: CustomerAccountAction
description: >-
  The CustomerAccountAction component displays a modal to complete an order
  action flow. This component can only be used with the
  customer-account.order.action.render extension target.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/customeraccountaction
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/customeraccountaction.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# CustomerAccountAction

The CustomerAccountAction component displays a modal to complete an order action flow. This component can only be used to populate the [order action](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action) extension target, which renders as a result of the customer clicking the order action button rendered via the [order action menu item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item) extension target.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Order modifications**: Let customers request returns, edit shipping addresses, or cancel orders through a focused modal.
* **Confirmation flows**: Present confirmation dialogs for destructive actions that require explicit customer consent.
* **Quick actions**: Collect minimal information from customers to complete a task without leaving the current page.

***

## Properties

Configure the following properties on the CustomerAccountAction component.

* **title**

  **string**

  **required**

  The main title displayed at the top of the action modal, rendered in the header alongside the close button. Use a short, descriptive phrase that tells the customer what the action does, such as "Request a return" or "Edit shipping address."

* **primaryAction**

  **RemoteFragment**

  The primary action for the modal. Accepts a single button component. Use this for the main confirmation action, such as "Submit" or "Confirm."

* **secondaryAction**

  **RemoteFragment**

  The secondary action for the modal. Accepts a single button component. Use this for dismissive actions like "Cancel" or alternative actions.

### Primary action button properties

Configure the following properties on the primary action button.

* **accessibilityLabel**

  **string**

  A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. When set, any `children` supplied to this component won't be announced to screen reader users.

* **accessibilityRole**

  **ButtonAccessibilityRole**

  **Default: 'button'**

  The role of the button that will be rendered.

  * `'button'`: Renders a regular button.
  * `'submit'`: Renders a button that submits a form.

* **disabled**

  **boolean**

  **Default: false**

  Whether the button is disabled, preventing it from being activated or receiving focus.

* **loading**

  **boolean**

  **Default: false**

  Whether the button is in a loading state, which replaces the button content with a loading indicator while a background action is being performed. This also disables the button.

* **loadingLabel**

  **string**

  Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.

* **onPress**

  **() => void**

  A callback fired when the button is activated by the user.

### ButtonAccessibilityRole

The accessibility role for button-like components. - \`button\`: A generic button that triggers an action. - \`submit\`: A button that submits a form.

```ts
'button' | 'submit'
```

### Secondary action button properties

Configure the following properties on the secondary action button.

* **accessibilityLabel**

  **string**

  A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. When set, any `children` supplied to this component won't be announced to screen reader users.

* **disabled**

  **boolean**

  **Default: false**

  Whether the button is disabled, preventing it from being activated or receiving focus.

* **loading**

  **boolean**

  **Default: false**

  Whether the button is in a loading state, which replaces the button content with a loading indicator while a background action is being performed. This also disables the button.

* **loadingLabel**

  **string**

  Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.

* **onPress**

  **() => void**

  A callback fired when the button is activated by the user.

***

## Examples

### Create a basic action modal

Display a modal with a heading, content, and a primary action button. This example shows a `CustomerAccountAction` with a simple layout for the order action target.

## Create a basic action modal

![A dismissible modal with a header, content area, and action buttons](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/customeraccountaction-preview-DHJX34dZ.png)

## Create a basic action modal

##### React

```tsx
import {
  Button,
  CustomerAccountAction,
  TextBlock,
  reactExtension,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension('customer-account.order.action.render', () => (
  <App />
));

function App() {
  const api = useApi<'customer-account.order.action.render'>();

  return (
    <CustomerAccountAction
      title="Extension title"
      primaryAction={
        <Button
          onPress={() => {
            api.close();
          }}
        >
          Click to close
        </Button>
      }
    >
      <TextBlock>Extension content</TextBlock>
    </CustomerAccountAction>
  );
}
```

##### JS

```js
import {
  Button,
  CustomerAccountAction,
  extension
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order.action.render',
  (root, api) => {
    renderApp(root, api);
  },
)

async function renderApp(root, api) {
  const primaryAction = root.createFragment();
  await primaryAction.append(root.createComponent(Button, {onPress: () => {api.close()}}, 'Click to close'));

  const customerAccountAction = root.createComponent(
    CustomerAccountAction,
    {
      title: 'Extension title',
      primaryAction,
    },
    root.createComponent('TextBlock', {}, 'Extension content')
  );
  root.append(customerAccountAction);
}
```

### Show a confirmation dialog

Present a confirmation dialog for a destructive action. This example shows a `CustomerAccountAction` with both primary and secondary action buttons for canceling an order.

## Show a confirmation dialog

##### React

```tsx
import {
  Button,
  CustomerAccountAction,
  TextBlock,
  reactExtension,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension('customer-account.order.action.render', () => (
  <App />
));

function App() {
  const api = useApi<'customer-account.order.action.render'>();

  return (
    <CustomerAccountAction
      title="Cancel order"
      primaryAction={
        <Button
          onPress={() => {
            api.close();
          }}
        >
          Confirm cancellation
        </Button>
      }
      secondaryAction={
        <Button
          onPress={() => {
            api.close();
          }}
        >
          Go back
        </Button>
      }
    >
      <TextBlock>
        Are you sure you want to cancel this order? This action
        can't be undone.
      </TextBlock>
    </CustomerAccountAction>
  );
}
```

##### JS

```js
import {
  Button,
  CustomerAccountAction,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order.action.render',
  (root, api) => {
    renderApp(root, api);
  },
);

async function renderApp(root, api) {
  const primaryAction = root.createFragment();
  await primaryAction.append(
    root.createComponent(
      Button,
      {onPress: () => api.close()},
      'Confirm cancellation',
    ),
  );

  const secondaryAction = root.createFragment();
  await secondaryAction.append(
    root.createComponent(
      Button,
      {onPress: () => api.close()},
      'Go back',
    ),
  );

  const customerAccountAction = root.createComponent(
    CustomerAccountAction,
    {
      title: 'Cancel order',
      primaryAction,
      secondaryAction,
    },
    root.createComponent(
      'TextBlock',
      {},
      "Are you sure you want to cancel this order? This action can't be undone.",
    ),
  );
  root.append(customerAccountAction);
}
```

### Submit a return request

Collect confirmation from a customer before processing a return. This example shows a `CustomerAccountAction` modal with a description and primary and secondary actions.

## Submit a return request

##### React

```tsx
import {
  Button,
  CustomerAccountAction,
  TextBlock,
  reactExtension,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension('customer-account.order.action.render', () => (
  <App />
));

function App() {
  const api = useApi<'customer-account.order.action.render'>();

  return (
    <CustomerAccountAction
      title="Submit return request"
      primaryAction={
        <Button
          onPress={() => {
            api.close();
          }}
        >
          Submit request
        </Button>
      }
      secondaryAction={
        <Button
          onPress={() => {
            api.close();
          }}
        >
          Cancel
        </Button>
      }
    >
      <TextBlock>
        Your return request will be reviewed within 2 business
        days. You'll receive an email with the return shipping
        label.
      </TextBlock>
    </CustomerAccountAction>
  );
}
```

##### JS

```js
import {
  Button,
  CustomerAccountAction,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order.action.render',
  (root, api) => {
    renderApp(root, api);
  },
);

async function renderApp(root, api) {
  const primaryAction = root.createFragment();
  await primaryAction.append(
    root.createComponent(
      Button,
      {onPress: () => api.close()},
      'Submit request',
    ),
  );

  const secondaryAction = root.createFragment();
  await secondaryAction.append(
    root.createComponent(
      Button,
      {onPress: () => api.close()},
      'Cancel',
    ),
  );

  const customerAccountAction = root.createComponent(
    CustomerAccountAction,
    {
      title: 'Submit return request',
      primaryAction,
      secondaryAction,
    },
    root.createComponent(
      'TextBlock',
      {},
      "Your return request will be reviewed within 2 business days. You'll receive an email with the return shipping label.",
    ),
  );
  root.append(customerAccountAction);
}
```

***

## Best practices

* **Highlight the key decision**: Use the component to present essential details and actions needed to confirm or complete an order task.
* **Collect only what's necessary**: Request the minimum information required to finish the task so the flow stays quick and friction-free.
* **Keep forms simple**: Use clear labels, intuitive actions, and concise copy so customers know what's required and what happens next.
* **Use full-page extensions for complex flows**: If the task spans multiple steps or needs extensive input, consider building a full-page extension instead.

***

## Limitations

* This component can only be used within the `customer-account.order.action.render` extension target. It won't render in other targets.
* The modal doesn't support multi-step flows. Each action modal is a single-step interaction.

***