---
title: Migrate to the Polaris clipboard item component
description: >-
  Learn how to migrate the ClipboardItem component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/clipboard-item
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/clipboard-item.md
---

# 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`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/utilities/clipboarditem) component and is available as [`<s-clipboard-item>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clipboard-item) in API versions 2025-10 and newer.

***

## Updated properties

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

### on​Copy

The previous `ClipboardItem` `onCopy` prop still uses `onCopy` in Preact, but it now handles the [`copy`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clipboard-item#events-propertydetail-copy) event. The handler now receives a `ClipboardEvent` instead of being called with no arguments.

### on​Copy​Error

The previous `ClipboardItem` `onCopyError` prop still uses `onCopyError` in Preact, but it now handles the [`copyerror`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clipboard-item#events-propertydetail-copyerror) event. The handler now receives an `Event` instead of being called with no arguments.

***

## Updated patterns

### Activation

The previous pattern of activating a `ClipboardItem` by setting `activateAction="copy"` and `activateTarget` on a `Button` has been replaced with the [`command`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button#properties-propertydetail-command) and [`commandFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button#properties-propertydetail-commandfor) attributes on the triggering component. This works with any activator that supports commands, such as [`s-button`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button) or [`s-link`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/link).

| Previous pattern | New pattern |
| - | - |
| `activateAction="copy"` + `activateTarget="item-id"` on the trigger | `command="--copy"` + `commandFor="item-id"` on the trigger |

## Migrating activation to command and commandFor

##### Latest (Preact)

```tsx
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>
    </>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
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" />
    </>
  );
}
```

***