# CustomerAccountAction

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.

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

```

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

value: `RemoteFragment`

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

### secondaryAction

value: `RemoteFragment`

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

### title

value: `string`

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

value: `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

value: `ButtonAccessibilityRole`

  - ButtonAccessibilityRole: 'button' | 'submit'
The role of the button that will be rendered.

`button`: renders a regular button.

`submit`: renders a button that submits a form.

### disabled

value: `boolean`

Disables the button, disallowing any interaction.

### loading

value: `boolean`

Replaces content with a loading indicator.

### loadingLabel

value: `string`

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

### onPress

value: `() => void`

Callback that is run when the button is pressed.

## ButtonProps secondaryAction

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

### Docs_CustomerAccountAction_Button_SecondaryAction

### accessibilityLabel

value: `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

value: `boolean`

Disables the button, disallowing any interaction.

### loading

value: `boolean`

Replaces content with a loading indicator.

### loadingLabel

value: `string`

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

### onPress

value: `() => void`

Callback that is run when the button is pressed.