CustomerAccountAction

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/2024-10/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/2024-10/targets/order-action-menu/customer-account-order-action-menu-item-render) extension target.

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

import {
  Button,
  CustomerAccountAction,
  extension
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order.action.render',
  (root, api) => {
    renderApp(root, api);
  },
)

async function renderApp(root, api) {
  const primaryAction = root.createFragment();
  await primaryAction.append(root.createComponent(Button, {onPress: () => {api.close()}}, 'Click to close'));

  const customerAccountAction = root.createComponent(
    CustomerAccountAction,
    {
      title: 'Extension title',
      primaryAction,
    },
    root.createComponent('TextBlock', {}, 'Extension content')
  );
  root.append(customerAccountAction);
}

CustomerAccountActionProps

CustomerAccountActionProps

primaryAction

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

secondaryAction

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

title

Sets the title of the Action container.

ButtonProps primaryAction

Supported props for Buttons used inside CustomerAccountAction `primaryAction` prop.<br><br>`children` only support text.

Docs_CustomerAccountAction_Button_PrimaryAction

accessibilityLabel

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

The role of the button that will be rendered. `button`: renders a regular button. `submit`: renders a button that submits a form.

disabled

Disables the button, disallowing any interaction.

loading

Replaces content with a loading indicator.

loadingLabel

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

onPress

Callback that is run when the button is pressed.

ButtonAccessibilityRole

'button' | 'submit'

ButtonProps secondaryAction

Supported props for Button used inside CustomerAccountAction `secondaryAction` prop.<br><br>`children` only support text.

Docs_CustomerAccountAction_Button_SecondaryAction

accessibilityLabel

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

Disables the button, disallowing any interaction.

loading

Replaces content with a loading indicator.

loadingLabel

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

onPress

Callback that is run when the button is pressed.