Choose a version:

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 extension target, which renders as a result of the customer clicking the order action button rendered via the 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

Anchor to PropertiesProperties

Configure the following properties on the customer account action component.

Anchor to heading 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."
Anchor to id 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.

Anchor to SlotsSlots

The customer account action component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to primary-action primary-action HTMLElement: The primary action for the modal. Accepts a single button element. Use this for the main confirmation action, such as "Submit" or "Confirm."
Anchor to secondary-actions secondary-actions HTMLElement: The secondary actions for the modal. Accepts multiple button elements. Use this for dismissive actions like "Cancel" or alternative actions.

Anchor to Slot button propertiesSlot button properties

Configure the following properties on slot action buttons.

Anchor to accessibilityLabel 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.
Anchor to click click ((event: <typeof buttonTagName>) => void) | null: Callback when the button is activated. This will be called before the action indicated by type.
Anchor to command 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.
Anchor to commandFor 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.
Anchor to disabled disabled boolean Default: false: Disables the button, disallowing any interaction.
Anchor to href 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.
Anchor to loading 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.

(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.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to ExamplesExamples

Anchor to Create a basic action modalCreate 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.

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>

Anchor to Add a form to the modalAdd 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

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

Anchor to Show a loading stateShow 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

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

Anchor to Best practicesBest 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.

Was this page helpful?