# Action API


The Action API allows an action extension to modally present its corresponding modal target.

#### Supporting targets
- [pos.home.tile.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render)
- [pos.purchase.post.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render)
- [pos.purchase.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render)
- [pos.order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render)
- [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render)
- [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render)
- [pos.customer-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)
- [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render)
- [pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render)
- [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)


## ActionApi

### ActionApiContent

### presentModal

value: `() => void`

Presents the `action-overlay.render` extension target on top of present view.

For example: if we are calling presentModal() from pos.purchase.post.action.menu-item.render, it should present pos.purchase.post.action.render.

## Examples


The Action API allows an action extension to modally present its corresponding modal target.

#### Supporting targets
- [pos.home.tile.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render)
- [pos.purchase.post.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render)
- [pos.purchase.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render)
- [pos.order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render)
- [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render)
- [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render)
- [pos.customer-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)
- [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render)
- [pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render)
- [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)




```tsx
import React from 'react';
import {
  reactExtension,
  useApi,
  Button,
} from '@shopify/ui-extensions-react/point-of-sale';

const PostPurchaseActionItem = () => {
  const api = useApi<'pos.purchase.post.action.menu-item.render'>();

  return <Button onPress={() => api.action.presentModal()} />;
};

export default reactExtension(
  'pos.purchase.post.action.menu-item.render',
  () => <PostPurchaseActionItem />,
);

```

```ts
import {Button, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.purchase.post.action.menu-item.render',
  (root, api) => {
    const actionItem = root.createComponent(Button, {
      onPress: () => api.action.presentModal(),
    });

    root.append(actionItem);
  },
);

```



```tsx
import React from 'react';
import {
  reactExtension,
  useApi,
  Tile,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      onPress={() => api.action.presentModal()}
      enabled
    />
  );
};

export default reactExtension(
  'pos.home.tile.render',
  () => <SmartGridTile />
);
```

```ts
import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'Action API',
    onPress: () => api.action.presentModal(),
    enabled: true,
  });

  root.append(tile);
});

```

## Examples


The Action API allows an action extension to modally present its corresponding modal target.

#### Supporting targets
- [pos.home.tile.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render)
- [pos.purchase.post.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render)
- [pos.purchase.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render)
- [pos.order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render)
- [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render)
- [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render)
- [pos.customer-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render)
- [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render)
- [pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render)
- [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)




```tsx
import React from 'react';
import {
  reactExtension,
  useApi,
  Button,
} from '@shopify/ui-extensions-react/point-of-sale';

const PostPurchaseActionItem = () => {
  const api = useApi<'pos.purchase.post.action.menu-item.render'>();

  return <Button onPress={() => api.action.presentModal()} />;
};

export default reactExtension(
  'pos.purchase.post.action.menu-item.render',
  () => <PostPurchaseActionItem />,
);

```

```ts
import {Button, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.purchase.post.action.menu-item.render',
  (root, api) => {
    const actionItem = root.createComponent(Button, {
      onPress: () => api.action.presentModal(),
    });

    root.append(actionItem);
  },
);

```



```tsx
import React from 'react';
import {
  reactExtension,
  useApi,
  Tile,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      onPress={() => api.action.presentModal()}
      enabled
    />
  );
};

export default reactExtension(
  'pos.home.tile.render',
  () => <SmartGridTile />
);
```

```ts
import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'Action API',
    onPress: () => api.action.presentModal(),
    enabled: true,
  });

  root.append(tile);
});

```