---
title: Admin action
description: >-
  The admin action component configures the primary action, secondary action,
  and title for admin action extensions. Use admin action to define the core
  interaction points and header content that merchants see when your extension
  renders.
api_version: 2026-01
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-action
  md: >-
    https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-action.md
---

# Admin action

**Requires the \[Action Extension API]\(/docs/api/admin-extensions/latest/target-apis/core-apis/action-extension-api) or \[Purchase Options Card Configuration API]\(/docs/api/admin-extensions/latest/target-apis/contextual-apis/purchase-options-card-configuration-api).:**

The admin action component configures the primary action, secondary action, and title for admin action extensions. Use admin action to define the core interaction points and header content that merchants see when your extension renders.

Learn how to [build an admin action extension](https://shopify.dev/docs/apps/build/admin/actions-blocks/build-admin-action).

### Support Targets (25)

### Supported targets

* [admin.​abandoned-checkout-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/abandoned-checkouts#abandoned-checkout-details-action-)
* [admin.​catalog-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/catalogs#catalog-details-action-)
* [admin.​collection-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/collections#collection-details-action-target)
* [admin.​collection-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/collections#collection-index-targets)
* [admin.​company-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/companies#company-details-action-)
* [admin.​customer-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-details-action-)
* [admin.​customer-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-index-targets)
* [admin.​customer-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-index-selection-action-)
* [admin.​customer-segment-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-segment-targets)
* [admin.​discount-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/discounts#discount-details-action-)
* [admin.​discount-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/discounts#discount-index-targets)
* [admin.​draft-order-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-details-action-)
* [admin.​draft-order-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-index-targets)
* [admin.​draft-order-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-index-selection-action-)
* [admin.​gift-card-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/gift-cards#gift-card-details-action-)
* [admin.​order-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-details-action-)
* [admin.​order-fulfilled-card.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-fulfilled-card-targets)
* [admin.​order-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-index-targets)
* [admin.​order-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-index-selection-action-)
* [admin.​product-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-action-)
* [admin.​product-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-index-targets)
* [admin.​product-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-index-selection-action-)
* [admin.​product-purchase-option.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-purchase-option-action-)
* [admin.​product-variant-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-details-action-)
* [admin.​product-variant-purchase-option.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-purchase-option-action-)

#### Use cases

* **Modal entry points:** Wrap your extension UI to create action extensions accessible from More actions menus.
* **Resource actions:** Build actions that operate on specific resources like products, orders, or customers.
* **Bulk operations:** Create actions that process multiple selected resources from index pages.
* **Configuration workflows:** Implement settings or configuration interfaces launched from admin pages.

***

## Properties

Configure the following properties on the admin action component.

* **heading**

  **string**

  The text to use as the action modal's title. If not provided, the name of the extension will be used.

* **loading**

  **boolean**

  **Default: false**

  Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action is in an inert state that prevents user interaction.

### Slots

The admin action component supports slots for additional content placement within the component. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).

* **primary-action**

  **HTMLElement**

  **required**

  The main action button or link displayed in the admin action modal. This represents the primary or most important action that users can take in this modal context, typically displayed with high visual prominence.

* **secondary-actions**

  **HTMLElement**

  **required**

  Additional action buttons or links displayed in the admin action modal. These provide alternative or supporting actions, visually de-emphasized compared to the primary action to establish clear hierarchy.

***

## Examples

### Configure an admin action modal

Set up the modal header and action [buttons](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button) for an admin action extension. This example shows a titled modal with primary and secondary action buttons.

## html

```html
<s-admin-action heading="Extension title">
  Modal content
  <s-button slot="primary-action">Save</s-button>
  <s-button slot="secondary-actions">Cancel</s-button>
</s-admin-action>
```

### Show a loading state

Show a loading indicator while data is being fetched or processed. This example sets the `loading` property to display a loading state and disables the primary [button](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button).

## html

```html
<s-admin-action heading="Loading order details" loading>
  <s-text>Fetching data…</s-text>
  <s-button slot="primary-action" disabled>Save</s-button>
  <s-button slot="secondary-actions">Cancel</s-button>
</s-admin-action>
```

### Add form fields to the modal

Collect merchant input inside the action modal using form fields. This example includes a [text field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/text-field) and [number field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/number-field) arranged in a [stack](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/stack).

## html

```html
<s-admin-action heading="Edit shipping settings">
  <s-stack direction="block" gap="base">
    <s-text-field label="Shipping rate name" value="Standard shipping"></s-text-field>
    <s-number-field label="Flat rate amount" prefix="$" value="5.99"></s-number-field>
  </s-stack>
  <s-button slot="primary-action" variant="primary">Save changes</s-button>
  <s-button slot="secondary-actions">Discard</s-button>
</s-admin-action>
```

### Confirm a destructive action

Warn merchants before a permanent operation like deleting a resource. This example uses a critical [banner](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/banner) and a destructive primary [button](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button) to confirm deletion.

## html

```html
<s-admin-action heading="Delete product">
  <s-stack direction="block" gap="base">
    <s-banner tone="critical">
      This will permanently delete the product and all its variants. This action cannot be undone.
    </s-banner>
    <s-text>Product: Winter Jacket — 12 variants</s-text>
  </s-stack>
  <s-button slot="primary-action" variant="primary" tone="critical">Delete product</s-button>
  <s-button slot="secondary-actions">Cancel</s-button>
</s-admin-action>
```

### Show resource details in a modal

Display read-only resource information inside a modal before the merchant takes action. This example shows an order summary with [badges](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/badge), [dividers](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/divider), and a fulfillment [button](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button).

## html

```html
<s-admin-action heading="Order summary">
  <s-stack direction="block" gap="base">
    <s-stack direction="block" gap="small">
      <s-text type="strong">Order #1042</s-text>
      <s-text>3 items · $129.97</s-text>
    </s-stack>
    <s-divider></s-divider>
    <s-stack direction="block" gap="small">
      <s-text>Shipping: Standard (3–5 days)</s-text>
      <s-text>Status: <s-badge tone="info">Unfulfilled</s-badge></s-text>
    </s-stack>
  </s-stack>
  <s-button slot="primary-action" variant="primary">Fulfill order</s-button>
  <s-button slot="secondary-actions">Close</s-button>
</s-admin-action>
```

***

## Best practices

* **Use action-oriented labels:** Write labels using the `{verb}+{noun}` format like **Save changes**, **Delete product**, or **Create discount** rather than generic labels like **Submit** or **OK**.
* **Follow action hierarchy:** Primary actions complete or advance the workflow (like **Save** or **Publish**), while secondary actions cancel or go back (like **Cancel** or **Discard changes**).
* **Write descriptive titles:** Titles should name the specific task like **Edit shipping settings** or **Archive old orders**, not generic phrases like **Actions** or **Settings**.
* **Limit to one task per action:** Each button should trigger a single operation. If you need multiple steps, guide merchants through them sequentially rather than combining operations.

***