---
title: ClipboardItem
description: >-
  The ClipboardItem component copies text to the user's clipboard when triggered
  by another component. Use ClipboardItem alongside Button, Pressable, or Link
  to let users copy discount codes, order numbers, or referral links.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/clipboarditem
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/clipboarditem.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# ClipboardItem

The ClipboardItem component copies text to the user's clipboard when triggered by another component. Use ClipboardItem alongside `Button`, `Pressable`, or `Link` to let users copy discount codes, order numbers, or referral links.

ClipboardItem is a non-rendering component. It connects to a trigger element through the `activateTarget` property on the trigger component.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Discount codes**: Let customers copy a promotion code to use on their next purchase.
* **Order confirmation numbers**: Provide a quick-copy action for order or tracking IDs on the Order status page.
* **Referral codes**: Let customers copy and share a referral code with friends.

***

## Properties

Configure the following properties on the ClipboardItem component.

* **id**

  **string**

  A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

* **onCopy**

  **() => void**

  A callback fired when the text is successfully copied to the clipboard. Use this to show a confirmation message or update the UI.

* **onCopyError**

  **() => void**

  A callback fired when the copy to clipboard fails. Use this to display an error message or provide a fallback action.

* **text**

  **string**

  **Default: ''**

  The plain text content to copy to the clipboard when this component is activated. For example, a discount code, order number, or tracking URL.

***

## Examples

### Copy text to the clipboard

Copy text to the clipboard when a trigger component is activated. This example shows a `ClipboardItem` connected to a `Button` through the `activateTarget` property.

## Copy text to the clipboard

![A button that copies text to the clipboard with a tooltip confirmation](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/clipboard-basic-CAPHKoqB.png)

## Copy text to the clipboard

##### React

```tsx
import {
  reactExtension,
  Button,
  ClipboardItem,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

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

##### JS

```js
import {
  extension,
  ClipboardItem,
  Button,
} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const button = root.createComponent(
    Button,
    {
      activateTarget: 'discount-code',
    },
    'Copy discount code',
  );
  const clipboardItem = root.createComponent(ClipboardItem, {
    text: 'SAVE 25',
    id: 'discount-code',
  });
  root.appendChild(button);
  root.appendChild(clipboardItem);
});
```

### Copy the content of a QR code

Provide an alternative way for customers to access QR code content. This example pairs a `ClipboardItem` with a QR code so customers can copy the URL instead of scanning.

## Copy the content of a QR code

![A QR code with a copy button as an alternative way to access the content](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/clipboard-qrcode--oCk7h8s.png)

## Copy the content of a QR code

##### React

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

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

function Extension() {
  const bitcoinAddress =
    '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd';

  return (
    <BlockStack maxInlineSize={200}>
      <QRCode
        size="fill"
        content={`bitcoin:${bitcoinAddress}`}
      />
      <Button activateTarget="bitcoin-address">
        Copy Bitcoin address
      </Button>
      <ClipboardItem
        text={bitcoinAddress}
        id="bitcoin-address"
      />
    </BlockStack>
  );
}
```

##### JS

```js
import {
  extension,
  BlockStack,
  Button,
  ClipboardItem,
  QRCode,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const bitcoinAddress =
      '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd';
    const qrCodeContent = `bitcoin:${bitcoinAddress}`;

    const qrCode = root.createComponent(QRCode, {
      content: qrCodeContent,
      size: 'fill',
    });

    const clipboardItem = root.createComponent(
      ClipboardItem,
      {
        text: bitcoinAddress,
        id: 'bitcoin-address',
      },
    );

    const button = root.createComponent(
      Button,
      {
        activateTarget: 'bitcoin-address',
      },
      'Copy Bitcoin address',
    );

    const blockStack = root.createComponent(
      BlockStack,
      {
        maxInlineSize: 200,
      },
    );

    blockStack.appendChild(qrCode);
    blockStack.appendChild(button);
    blockStack.appendChild(clipboardItem);

    root.appendChild(blockStack);
  },
);
```

### Swap an icon after copying

Provide visual feedback by swapping an icon to a checkmark after the text is copied. This example uses the `onCopy` callback to toggle the icon state.

## Swap an icon after copying

![A copy button that shows a checkmark icon after the text is copied](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/clipboard-oncopy-CaliJVZy.png)

## Swap an icon after copying

##### React

```tsx
import {useState} from 'react';
import {
  reactExtension,
  Button,
  ClipboardItem,
  Icon,
  InlineStack,
  Text,
} from '@shopify/ui-extensions-react/checkout';

import type {IconProps} from '@shopify/ui-extensions/checkout';

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

function Extension() {
  const [iconSource, setIconSource] =
    useState<IconProps['source']>('clipboard');

  return (
    <>
      <Button activateTarget="sample-id">
        <InlineStack>
          <Text>Copy to clipboard</Text>
          <Icon
            source={iconSource}
            appearance="monochrome"
          />
        </InlineStack>
      </Button>
      <ClipboardItem
        text="This text will be copied to the clipboard"
        id="sample-id"
        onCopy={() => {
          setIconSource('success');
          setTimeout(() => {
            setIconSource('clipboard');
          }, 2500);
        }}
        onCopyError={() => {
          setIconSource('error');
          setTimeout(() => {
            setIconSource('clipboard');
          }, 2500);
        }}
      />
    </>
  );
}
```

##### JS

```js
import {
  extension,
  Button,
  ClipboardItem,
  Icon,
  InlineStack,
  Text,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const button = root.createComponent(Button, {
      activateTarget: 'sample-id',
    });

    const inlineStack = root.createComponent(
      InlineStack,
      {},
    );

    const text = root.createComponent(
      Text,
      {},
      'Copy to clipboard',
    );

    const icon = root.createComponent(Icon, {
      source: 'clipboard',
      appearance: 'monochrome',
    });

    const clipboardItem = root.createComponent(
      ClipboardItem,
      {
        text: 'This text will be copied to the clipboard',
        id: 'sample-id',
        onCopy: () => {
          icon.updateProps({source: 'success'});
          setTimeout(() => {
            icon.updateProps({
              source: 'clipboard',
            });
          }, 2500);
        },
        onCopyError: () => {
          icon.updateProps({source: 'error'});
          setTimeout(() => {
            icon.updateProps({
              source: 'clipboard',
            });
          }, 2500);
        },
      },
    );

    button.appendChild(inlineStack);
    inlineStack.appendChild(text);
    inlineStack.appendChild(icon);
    root.appendChild(button);
    root.appendChild(clipboardItem);
  },
);
```

***

## Best practices

* **Use descriptive trigger text**: Label the trigger with what's being copied, such as "Copy discount code" rather than just "Copy."
* **Display the value being copied**: Show the text content visually alongside the copy trigger so users know what they're copying.
* **Provide copy feedback**: Use the `onCopy` callback to provide visual feedback, such as swapping an icon or showing a confirmation message.
* **Keep text values short**: Clipboard items work best with concise values like codes, IDs, and short URLs rather than long paragraphs.

***

## Limitations

* ClipboardItem doesn't render any visible UI. It must be paired with a visible trigger component such as `Button`, `Pressable`, or `Link`.
* The `text` property only accepts plain strings. Rich text, HTML, and binary content aren't supported.

***