---
title: Migrate CustomerAccountAction to the Polaris customer account action component
description: >-
  Learn how to migrate the CustomerAccountAction component to Polaris web
  components in customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components/customer-account-action
  md: >-
    https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components/customer-account-action.md
---

# Migrate CustomerAccountAction to the Polaris customer account action component

The Polaris customer account action component renders a modal for an order action flow. It replaces the previous [`CustomerAccountAction`](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/components/actions/customeraccountaction) component and is available as [`<s-customer-account-action>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action) in API versions 2025-10 and newer.

***

## Updated properties

### title

The previous `CustomerAccountAction` `title` prop has been renamed to [`heading`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action#properties-propertydetail-heading).

### primary​Action and secondary​Action

The previous `primaryAction` and `secondaryAction` props accepted a `RemoteFragment` containing a `Button`. The Polaris customer account action component uses [slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots) instead. Render `<s-button>` elements as children and assign them to the `primary-action` slot or the `secondary-actions` slot, which now accepts multiple buttons.

| Previous prop | New slot |
| - | - |
| `primaryAction={<Button>…</Button>}` | `<s-button slot="primary-action">…</s-button>` |
| `secondaryAction={<Button>…</Button>}` | `<s-button slot="secondary-actions">…</s-button>` |

## Migrating primaryAction and secondaryAction to slots

##### Latest (Preact)

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-customer-account-action heading="Cancel order">
      <s-text>
        Are you sure you want to cancel this order? This action can't be undone.
      </s-text>
      <s-button slot="primary-action" onClick={() => shopify.close()}>
        Confirm cancellation
      </s-button>
      <s-button slot="secondary-actions" onClick={() => shopify.close()}>
        Go back
      </s-button>
    </s-customer-account-action>
  );
}
```

##### Pre-Polaris (2025-07)

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

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

function Extension() {
  const api = useApi();

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

***

## Slot button properties

Buttons placed in the `primary-action` and `secondary-actions` slots only support a subset of the [`<s-button>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) properties.

### Removed slot button properties

The following props from the previous `Button` component are no longer supported inside action slots:

| Removed prop | Migration notes |
| - | - |
| `loadingLabel` | Removed. Use the default loading indicator by setting [`loading`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action#slotbuttonproperties-propertydetail-loading). |
| `accessibilityRole` | Removed. |

### Updated slot button properties

#### on​Press

The previous `Button` `onPress` prop is now called [`onClick`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action#slotbuttonproperties-propertydetail-click).

### New slot button properties

Slot buttons support the following new properties:

| New prop | Description |
| - | - |
| [`href`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action#slotbuttonproperties-propertydetail-href) | Navigates to a URL when the button is activated. |
| [`command`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action#slotbuttonproperties-propertydetail-command) | Sets the action to run on the target component when the button is activated. |
| [`commandFor`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action#slotbuttonproperties-propertydetail-commandfor) | Sets the ID of the target component for the command. |

***

## Further guidance

### Closing the modal

The previous `CustomerAccountAction` exposed a `close` method through `useApi`. On the Polaris customer account action component, call [`shopify.close()`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/order-action-menu/customer-account-order-action-render#actionextensionapi-propertydetail-close) from the global `shopify` object instead.

***