--- title: Clipboard item description: >- The clipboard item component copies text to the user's clipboard when triggered by another component. Use clipboard item alongside button or link to let users copy discount codes, order numbers, or referral links in one click. api_version: 2026-04 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clipboard-item md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clipboard-item.md --- # Clipboard item The clipboard item component copies text to the user's clipboard when triggered by another component. Use clipboard item alongside [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) or [link](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/link) to let users 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/customer-account-ui-extensions/latest/web-components/actions/button) or [link](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/link). ### Support Targets (24) ### Supported targets * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Discount codes**: Let customers copy a promotion code from their account instead of memorizing or retyping it. * **Order confirmation numbers**: Provide a quick-copy action for order or tracking IDs on the Order status page. * **Referral codes**: Allow customers to copy and share a referral code with friends from their account. *** ## 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): 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 users 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 text element with a copy-to-clipboard button that copies content on click.](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 users can share it. 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 users 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. ***