Choose a version:

AdminAction

AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.

Anchor to adminactionpropsAdminActionProps

Anchor to loading loading boolean: Sets the loading state of the action modal
Anchor to primaryAction primaryAction RemoteFragment: Sets the Primary action button of the container. This component must be a button component.
Anchor to secondaryAction secondaryAction RemoteFragment: Sets the Secondary action button of the container. This component must be a button component.
Anchor to title title string: Sets the title of the Action container. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.

AdminActionProps

loading
Sets the loading state of the action modal
```
boolean
```
primaryAction
Sets the Primary action button of the container. This component must be a button component.
```
RemoteFragment
```
secondaryAction
Sets the Secondary action button of the container. This component must be a button component.
```
RemoteFragment
```
title
Sets the title of the Action container. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
```
string
```

export interface AdminActionProps {
  /**
   * Sets the title of the Action container. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
   */
  title?: string;

  /**
   * Sets the Primary action button of the container. This component must be a button component.
   */
  primaryAction?: RemoteFragment;

  /**
   * Sets the Secondary action button of the container. This component must be a button component.
   */
  secondaryAction?: RemoteFragment;

  /**
   * Sets the loading state of the action modal
   */
  loading?: boolean;
}

Was this section helpful?

Set the primary and secondary action of the Action modal.

import React from 'react';

import {

reactExtension,

AdminAction,

Button,

Text,

} from '@shopify/ui-extensions-react/admin';

function App() {

return (

<AdminAction

title="My App Action"

primaryAction={

<Button onPress={() => {}}>Action</Button>

}

secondaryAction={

Secondary

</Button>

}

<Text>Modal content</Text>

</AdminAction>

);

}

export default reactExtension(

'Playground',

() => <App />,

);

examples

Set the primary and secondary action of the Action modal.

React

import React from 'react';
import {
  reactExtension,
  AdminAction,
  Button,
  Text,
} from '@shopify/ui-extensions-react/admin';

function App() {
  return (
    <AdminAction
      title="My App Action"
      primaryAction={
        <Button onPress={() => {}}>Action</Button>
      }
      secondaryAction={
        <Button onPress={() => {}}>
          Secondary
        </Button>
      }
    >
      <Text>Modal content</Text>
    </AdminAction>
  );
}

export default reactExtension(
  'Playground',
  () => <App />,
);

JS

import {extension, AdminAction, Button} from '@shopify/ui-extensions/admin';

export default extension('Playground', (root) => {
  const primaryAction = root.createFragment();
  const secondaryAction = root.createFragment();

  primaryAction.appendChild(
    root.createComponent(Button, {onPress: () => {}}, 'Action')
  );
  secondaryAction.appendChild(
    root.createComponent(Button, {onPress: () => {}}, 'Secondary')
  );

  const adminAction = root.createComponent(AdminAction, {
    title: 'My App Action',
    primaryAction,
    secondaryAction,
  }, 'Modal content');

  root.appendChild(adminAction);
  root.mount();
});

Preview

Anchor to relatedRelated

AdminBlock