POS Extension menu item label ignores JSX content, uses TOML description only

Extensions
1

Problem

When creating a custom pos.product-details.action.menu-item.render extension, the button label text from the rendered JSX component is ignored. The extension always displays the description value from shopify.extension.toml instead of the custom label rendered in the component.

Expected Behavior

The button label should display the text/content passed to the <s-button> component’s children, allowing dynamic and translatable labels.

Actual Behavior

The button always displays the static description field from the TOML configuration file, ignoring any JSX content rendered inside the button component.

Steps to Reproduce

  1. Create a POS extension with target pos.product-details.action.menu-item.render
  2. Render a custom <s-button> component with text in JSX
  3. Set a different description value in shopify.extension.toml
  4. Build and deploy the extension
  5. Observe that the button shows the TOML description, not the JSX content

Code Example

shopify.extension.toml:

description = "Default Label from TOML"
[[extensions.targeting]]
module = "./src/MenuItem.jsx"
target = "pos.product-details.action.menu-item.render"

MenuItem.jsx:

import {render} from 'preact';

function Extension() {
  const onPress = async () => {
    shopify.action.presentModal();
  };

  // This label is IGNORED
  return <s-button variant="primary" onClick={onPress}>
    Custom Label from JSX
  </s-button>;
}

export default async () => {
  render(<Extension />, document.body);
};

Result: Button displays “Default Label from TOML” instead of “Custom Label from JSX”

Possible Workaround

Currently, the only way to change the button label is to modify the description field in shopify.extension.toml, which makes dynamic or locale-based labels impossible.

Environment

  • API Version: 2025-10
  • Extension Type: POS UI Extension
  • Target: pos.product-details.action.menu-item.render
  • Framework: Preact