---
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-01
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/utilities/clipboarditem
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/utilities/clipboarditem.md
---

# 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.

## 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

* #### Basic Copy to Clipboard

  ##### React

  ```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
          text="SAVE 25"
          id="discount-code"
        />
      </>
    );
  }
  ```

  ##### JS

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

  export default extension('purchase.checkout.block.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);
  });
  ```

## Examples

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

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

Swapping an icon when the text is copied

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

### Examples

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-01/clipboard-qrcode.png)

## Related

[Component - Button](button)

[Component - Pressable](pressable)

[Component - Link](link)

[Component - QR Code](qrcode)