Choose a version:

CustomerAccountAction

A modal to complete an order action flow. This component can only be used to populate the 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 extension target.

Anchor to customeraccountactionpropsCustomerAccountActionProps

title

string

required

Sets the title of the Action container.

primaryAction

RemoteFragment

Sets the Primary action button of the container. This component must be a button component.

secondaryAction

RemoteFragment

Sets the Secondary action button of the container. This component must be a button component.

Was this section helpful?

Anchor to buttonprops primaryactionButtonProps primaryAction

Supported props for Buttons used inside CustomerAccountAction primaryAction prop.

children only support text.

accessibilityLabel

string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

accessibilityRole

Default: 'button'

The role of the button that will be rendered.

button: renders a regular button.

submit: renders a button that submits a form.

disabled

boolean

Default: false

Disables the button, disallowing any interaction.

loading

boolean

Default: false

Replaces content with a loading indicator.

loadingLabel

string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

onPress

() => void

Callback that is run when the button is pressed.

Was this section helpful?

Anchor to buttonprops secondaryactionButtonProps secondaryAction

Supported props for Button used inside CustomerAccountAction secondaryAction prop.

children only support text.

accessibilityLabel

string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

disabled

boolean

Default: false

Disables the button, disallowing any interaction.

loading

boolean

Default: false

Replaces content with a loading indicator.

loadingLabel

string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

onPress

() => void

Callback that is run when the button is pressed.

Was this section helpful?

Basic CustomerAccountAction

import {

Button,

CustomerAccountAction,

TextBlock,

reactExtension,

useApi,

} from '@shopify/ui-extensions-react/customer-account';

import React from 'react';

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

<App />

));

function App() {

const api = useApi<'customer-account.order.action.render'>();

return (

<CustomerAccountAction

title="Extension title"

primaryAction={

<Button

onPress={() => {

api.close();

}}

>

Click to close

</Button>

}

>

<TextBlock>Extension content</TextBlock>

</CustomerAccountAction>

);

}

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 Save button.

Anchor to best-practicesBest Practices

Use CustomerAccountAction to shift focus toward information and functionality needed to confirm or complete an order action.
If the order action experience you’re building requires complex forms or large amounts of information, consider building a full-page extension instead.
See Polaris for more best practices and content guidelines for designing Modals.

Was this section helpful?