--- title: Clipboard item description: >- The clipboard item component copies text to the buyer's clipboard when triggered by another component. Use clipboard item alongside button or link to let buyers copy discount codes, order numbers, or referral links in one click. api_version: 2026-04 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clipboard-item md: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clipboard-item.md --- # Clipboard item The clipboard item component copies text to the buyer's clipboard when triggered by another component. Use clipboard item alongside [button](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button) or [link](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/link) to let buyers copy discount codes, order numbers, or referral links in one click. Clipboard item connects to a trigger element through the `commandFor` and `id` attribute pairing. It fires `copy` and `copyerror` events to confirm the result of the copy operation. Clipboard item doesn't render any visible UI on its own. Pair it with a visible trigger such as [button](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button) or [link](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/link). ### Support Targets (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#thank-you-cart-line-list-) * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/header#header-target) #### Use cases * **Discount codes**: Let buyers copy a promotion code directly from the checkout instead of memorizing or retyping it. * **Order confirmation numbers**: Provide a quick-copy action for order or tracking IDs on the Thank you page. * **Referral codes**: Allow buyers to copy and share a referral code with friends after completing a purchase. *** ## Properties Configure the following properties on the clipboard item component. * **id** **string** A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting. * **text** **string** **Default: ''** Plain text to be written to the clipboard. Rich text, HTML, and binary content aren't supported. ### Events The clipboard item component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events). * **copy** **CallbackEventListener\** A callback fired when the text is successfully copied to the clipboard. Use this to show a confirmation message or update the UI. * **copyerror** **CallbackEventListener\** A callback fired when the copy to clipboard fails. Use this to display an error message or provide a fallback action. ### CallbackEventListener A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag. ```ts (EventListener & { (event: CallbackEvent & TData): void; }) | null ``` ### CallbackEvent An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners. ```ts TEvent & { currentTarget: HTMLElementTagNameMap[TTagName]; } ``` *** ## Examples ### Copy a discount code with a button Pair a button with a clipboard item so buyers can copy a discount code in one click. This example connects an `s-button` to an `s-clipboard-item` using matching `commandFor` and `id` attributes. ## Copy a discount code with a button ![A rendered example of the clipboard item component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clipboard-default-CwDHUGWQ.png) ## html ```html Copy discount code ``` ### Copy an order number with a link Trigger a clipboard copy from a link instead of a button for inline copy actions. This example pairs an `s-link` with an `s-clipboard-item` to copy an order confirmation number. ## html ```html Copy order number ``` ### Copy a referral code Display a referral code alongside a copy button so buyers can share it after purchase. This example shows the code as visible text with a secondary button connected to an `s-clipboard-item`. ## html ```html Share your referral code with friends: REF-SHOP-7X9K2 Copy code ``` *** ## Best practices * **Use descriptive button 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 buyers know what they're copying. * **Listen for copy events**: Use the `copy` and `copyerror` events to provide feedback, such as changing the button text to "Copied!" after a successful copy. * **Keep text values short**: Clipboard items work best with concise values like codes, IDs, and short URLs rather than long paragraphs. ***