---
title: AdminAction
description: >-
  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.
api_version: 2024-04
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2024-04/components/other/adminaction
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2024-04/components/other/adminaction.md
---

# Admin​Action

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.

## AdminActionProps

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

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

* loading

  boolean

  Sets the loading state of the action modal

Examples

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-04/adminaction-default.png)

### Examples

* #### Set the primary and secondary action of the Action modal.

  ##### React

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

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

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

  ##### JS

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

## Related

[- AdminBlock](https://shopify.dev/docs/api/admin-extensions/components/other/adminblock)