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 component and is available as <s-customer-account-action> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

Anchor to titletitle

The previous CustomerAccountAction title prop has been renamed to heading.

Anchor to primaryAction and secondaryActionprimaryAction and secondaryAction

The previous primaryAction and secondaryAction props accepted a RemoteFragment containing a Button. The Polaris customer account action component uses 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.

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

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

Anchor to Slot button propertiesSlot button properties

Buttons placed in the primary-action and secondary-actions slots only support a subset of the <s-button> properties.

Anchor to Removed slot button propertiesRemoved slot button properties

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

Anchor to Updated slot button propertiesUpdated slot button properties

Anchor to onPressonPress

The previous Button onPress prop is now called onClick.

Anchor to New slot button propertiesNew slot button properties

Slot buttons support the following new properties:

Anchor to Further guidanceFurther guidance

Anchor to Closing the modalClosing the modal

The previous CustomerAccountAction exposed a close method through useApi. On the Polaris customer account action component, call shopify.close() from the global shopify object instead.