---
title: ClipboardItem
description: >-
  Enables clipboard functionality when its `id` is referenced by the
  `activateTarget` property of a `Button`, `Pressable`, or `Link` component.
  When activated, it copies the text to the clipboard and displays a `Tooltip`
  confirmation. 

   `ClipboardItem` is a non-rendering component.
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.

# Clipboard​Item

Enables clipboard functionality when its `id` is referenced by the `activateTarget` property of a `Button`, `Pressable`, or `Link` component. When activated, it copies the text to the clipboard and displays a `Tooltip` confirmation.

`ClipboardItem` is a non-rendering component.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## ClipboardItemProps

* **id**

  **string**

  A unique identifier for the component.

* **onCopy**

  **() => void**

  Callback run when the copy to clipboard succeeds.

* **onCopyError**

  **() => void**

  Callback run when the copy to clipboard fails.

* **text**

  **string**

  **Default: ''**

  Plain text to be written to the clipboard.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/clipboard-basic-CAPHKoqB.png)

### Examples

* #### Basic Copy to 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);
  });
  ```

* #### Copying content of a QR code to the user's clipboard

  ##### Description

  When displaying a QR code, include an alternative way for the user to get the content

  ##### React

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

  ##### JavaScript

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

* #### Swapping an icon when the text is copied

  ##### Description

  Use the onCopy property to display an icon that swaps to a checkmark when the text is copied.

  ##### React

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

  ##### JavaScript

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

## Related

[Component - Button](button)

[Component - Pressable](pressable)

[Component - Link](link)

[Component - QR Code](qrcode)