Choose a version:

Admin action

Requires the Action Extension API or 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.

Support

Targets (26)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the admin action component.

Anchor to heading heading string: The text to use as the action modal's title. If not provided, the name of the extension will be used.
Anchor to loading 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.

Anchor to SlotsSlots

The admin action component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to primary-action 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.
Anchor to secondary-actions 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.

Anchor to ExamplesExamples

Anchor to Configure an admin action modalConfigure an admin action modal

Set up the modal header and action buttons for an admin action extension. This example shows a titled modal with primary and secondary action buttons.

Preview

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>

Anchor to Show a loading stateShow 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.

Preview

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>

Anchor to Add form fields to the modalAdd form fields to the modal

Collect merchant input inside the action modal using form fields. This example includes a text field and number field arranged in a stack.

Preview

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>

Anchor to Confirm a destructive actionConfirm a destructive action

Warn merchants before a permanent operation like deleting a resource. This example uses a critical banner and a destructive primary button to confirm deletion.

Preview

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>

Anchor to Show resource details in a modalShow 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, dividers, and a fulfillment button.

Preview

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-button slot="primary-action" variant="primary">Fulfill order</s-button>

<s-button slot="secondary-actions">Close</s-button>

</s-admin-action>

Anchor to Best practicesBest 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.

Was this page helpful?