Migrate to the Polaris clipboard item component

The Polaris clipboard item component writes text to the customer's clipboard when activated by another component, such as a button or a link. It replaces the previous ClipboardItem component and is available as <s-clipboard-item> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris clipboard item component.

Anchor to onCopyonCopy

The previous ClipboardItem onCopy prop still uses onCopy in Preact, but it now handles the copy event. The handler now receives a ClipboardEvent instead of being called with no arguments.

Anchor to onCopyErroronCopyError

The previous ClipboardItem onCopyError prop still uses onCopyError in Preact, but it now handles the copyerror event. The handler now receives an Event instead of being called with no arguments.

Anchor to Updated patternsUpdated patterns

Anchor to ActivationActivation

The previous pattern of activating a ClipboardItem by setting activateAction="copy" and activateTarget on a Button has been replaced with the command and commandFor attributes on the triggering component. This works with any activator that supports commands, such as s-button or s-link.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  return (
    <>
      <s-button command="--copy" commandFor="discount-code">
        Copy discount code
      </s-button>
      <s-clipboard-item
        id="discount-code"
        text="SAVE25"
      ></s-clipboard-item>
    </>
  );
}

import {
  reactExtension,
  Button,
  ClipboardItem,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Button activateTarget="discount-code" activateAction="copy">
        Copy discount code
      </Button>
      <ClipboardItem id="discount-code" text="SAVE25" />
    </>
  );
}