---
title: Customer account action
description: >-
  The customer account action 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: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action.md
---

# Customer account action

The customer account action 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/latest/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/latest/targets/order-actions#order-action-menu-item) extension target.

Customer account action renders only within the `customer-account.order.action.render` extension target. The modal supports a single-step interaction only — multi-step flows aren't supported.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/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/2026-04/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 customer account action component.

* **heading**

  **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."

* **id**

  **string**

  A unique identifier for the element. Use this to target the element with CSS, JavaScript, or accessibility attributes. The `id` must be unique within the document.

### Slots

The customer account action component supports slots for additional content placement within the component. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).

* **primary-action**

  **HTMLElement**

  The primary action for the modal. Accepts a single [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) element. Use this for the main confirmation action, such as "Submit" or "Confirm."

* **secondary-actions**

  **HTMLElement**

  The secondary actions for the modal. Accepts multiple [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) elements. Use this for dismissive actions like "Cancel" or alternative actions.

***

## Slot button properties

Configure the following properties on slot action buttons.

* **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` target should take when this component is activated.

  * `--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 clipboard item.

  Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).

* **commandFor**

  **string**

  The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).

* **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

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

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

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

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

***

## Examples

### Create a basic action modal

Display a basic action modal with a heading and action buttons. This example shows an `s-customer-account-action` with a title, primary Save button, and secondary Cancel button.

## Create a basic action modal

![A modal overlay with an action title heading, content area, and Cancel and Save buttons.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/customer-account-action-default-TVfR_yk7.png)

## html

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

### Add a form to the modal

Collect input within the action modal using form fields. This example shows an `s-customer-account-action` with text fields for editing a shipping address.

## html

```html
<s-customer-account-action heading="Edit shipping address">
  <s-stack>
    <s-text-field label="Street address"></s-text-field>
    <s-text-field label="City"></s-text-field>
  </s-stack>
  <s-button slot="primary-action">
    Save address
  </s-button>
  <s-button slot="secondary-actions">
    Cancel
  </s-button>
</s-customer-account-action>
```

### Show a loading state

Display a loading indicator on the primary action while an operation completes. This example shows an `s-customer-account-action` with a `loading` attribute on the primary button.

## html

```html
<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" loading>
    Canceling...
  </s-button>
  <s-button slot="secondary-actions">
    Go back
  </s-button>
</s-customer-account-action>
```

***

## Best practices

* **Highlight the key decision**: 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 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, switch to a full-page extension instead of a modal.

***