Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

ClipboardItem

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 (50)

Supported targets

Anchor to ExamplesExamples

Anchor to Basic Copy to ClipboardBasic Copy to Clipboard

Basic Copy to Clipboard

Example

Basic Copy to Clipboard

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

Anchor to Copying content of a QR code to the user's clipboardCopying 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

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

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

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

Anchor to Swapping an icon when the text is copiedSwapping 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.

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.

Swapping an icon when the text is copied

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

Anchor to PropertiesProperties

Anchor to clipboarditempropsClipboardItemProps

Anchor to id
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.

Anchor to onCopy
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.

Anchor to onCopyError
onCopyError
() => void

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

Anchor to text
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.

Anchor to RelatedRelated

ComponentButton
ComponentPressable
ComponentLink
ComponentQR Code
Was this page helpful?