--- title: Clipboard item description: >- Copy text to the buyer's clipboard when triggered by another component, such as discount codes, order numbers, or referral links. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/clipboard-item md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/clipboard-item.md api_name: checkout-ui-extensions --- # 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/2026-07-rc/web-components/actions/button) or [link](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/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/2026-07-rc/web-components/actions/button) or [link](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/link). ### Support Targets (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/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-07-rc/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-07-rc/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/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-07/clipboard-basic-Ctmy24fF.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. ***