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

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

```

## AdminActionProps

### AdminActionProps

### title

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

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.

### loading

value: `boolean`

Sets the loading state of the action modal

## Related

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