---
title: CustomerAccountAction
description: A modal to complete an order action flow. This component can only be used to populate the [customer-account.order.action.render](/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-render) extension target, which renders as a result of the customer clicking the order action button rendered via the [customer-account.order.action.menu-item.render](/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-menu-item-render) extension target.
api_version: 2025-10
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/actions/customeraccountaction
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/actions/customeraccountaction.md
---

# Customer​Account​Action

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

## Properties

* heading

  string

  required

  Sets the heading of the action container.

* id

  string

  A unique identifier for the element.

## Slots

* primary-action

  HTMLElement

  The primary action for the page. Accepts a single Button element with restricted properties (see below).

* secondary-actions

  HTMLElement

  The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).

## Slot button properties

Supported props for Buttons used inside CustomerAccountAction slots.\
\
`children` only support text.

* accessibilityLabel

  string

  A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

  Use this when using only an icon or the button text is not enough context for users using assistive technologies.

* click

  ((event: CallbackEventListener\<typeof buttonTagName>) => void) | null

  Callback when the button is activated. This will be called before the action indicated by `type`.

* command

  '--auto' | '--show' | '--hide' | '--toggle' | '--copy'

  Default: '--auto'

  Sets the action the `commandFor` should take when this clickable is activated.

  See the documentation of particular components for the actions they support.

  * `--auto`: a default action for the target component.
  * `--show`: shows the target component.
  * `--hide`: hides the target component.
  * `--toggle`: toggles the target component.
  * `--copy`: copies the target ClipboardItem.

* commandFor

  string

  ID of a component that should respond to activations (e.g. clicks) on this component.

  See `command` for how to control the behavior of the target.

* disabled

  boolean

  Default: false

  Disables the button, disallowing any interaction.

* href

  string

  The URL to link to.

  * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
  * If a `commandFor` is set, the `command` will be executed instead of the navigation.

* loading

  boolean

  Default: false

  Replaces content with a loading indicator.

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null
```

### CallbackEvent

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### Examples

* #### Code

  ##### Default

  ```jsx
  <s-customer-account-action heading="Action title">
    Modal content
    <s-button slot="primary-action">
      Save
    </s-button>
    <s-button slot="secondary-actions">
      Cancel
    </s-button>
  </s-customer-account-action>
  ```

## Preview

![An example of the CustomerAccountAction component shows a dismissible modal with a header that says "Edit order", a field for adjusting quantities, and a Close button.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/customeraccountaction-default.png)

## Best practices

Use these best practices to deliver a clear and accessible experience in your extensions.

### Highlight the key decision

Use the component to present the 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 customer’s job so the flow stays quick and friction‑free.

### Keep forms simple and predictable

Use clear labels, intuitive actions, and concise copy so customers know what’s required and what happens next.

### Choose a full‑page extension for complex flows

If the task spans multiple steps or needs a lot of input, switch to a full‑page extension instead of a modal.

### Refer to Polaris guidance

Refer to Polaris for additional best practices and content guidelines when designing [modals](https://polaris-react.shopify.com/components/deprecated/modal#best-practices).