--- 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 api_name: admin-extensions 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/2026-01/target-apis/core-apis/action-extension-api) or \[Purchase Options Card Configuration API]\(/docs/api/admin-extensions/2026-01/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/2026-01/web-components/actions/button) for an admin action extension. This example shows a titled modal with primary and secondary action buttons. ## Configure an admin action modal ![Set up the modal header and action \[buttons\](/docs/api/admin-extensions/2026-01/web-components/actions/button) for an admin action extension. This example shows a titled modal with primary and secondary action buttons.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/admin/components/adminaction-example-CJj9EXBo.png) ## html ```html Modal content Save Cancel ``` ### 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/2026-01/web-components/actions/button). ## html ```html Fetching data… Save Cancel ``` ### 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/2026-01/web-components/forms/text-field) and [number field](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/forms/number-field) arranged in a [stack](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/layout-and-structure/stack). ## html ```html Save changes Discard ``` ### 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/2026-01/web-components/feedback-and-status-indicators/banner) and a destructive primary [button](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/actions/button) to confirm deletion. ## html ```html This will permanently delete the product and all its variants. This action cannot be undone. Product: Winter Jacket — 12 variants Delete product Cancel ``` ### 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/2026-01/web-components/feedback-and-status-indicators/badge), [dividers](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/layout-and-structure/divider), and a fulfillment [button](https://shopify.dev/docs/api/admin-extensions/2026-01/web-components/actions/button). ## html ```html Order #1042 3 items · $129.97 Shipping: Standard (3–5 days) Status: Unfulfilled Fulfill order Close ``` *** ## 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. ***