Clipboard item
Enables copying text to the user’s clipboard. Use alongside Button or Link components to let users easily copy content. <s-clipboard-item> doesn’t render visually.
Support
Targets (24)
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to propertiesProperties
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to texttexttextstringstringDefault: ''Default: ''
Plain text to be written to the clipboard.
Anchor to eventsEvents
Learn more about registering events.
- Anchor to copycopycopyCallbackEventListener<typeof tagName>CallbackEventListener<typeof tagName>
Callback run when the copy to clipboard succeeds.
- Anchor to copyerrorcopyerrorcopyerrorCallbackEventListener<typeof tagName>CallbackEventListener<typeof tagName>
Callback run when the copy to clipboard fails.
CallbackEventListener
(EventListener & {
(event: CallbackEvent<TTagName, Event> & TData): void;
}) | nullCallbackEvent
TEvent & {
currentTarget: HTMLElementTagNameMap[TTagName];
}Examples
<s-button commandFor="discount-code">Copy discount code</s-button>
<s-clipboard-item id="discount-code" text="SAVE 25"></s-clipboard-item>
Preview

Examples
Code
Default
<s-button commandFor="discount-code">Copy discount code</s-button> <s-clipboard-item id="discount-code" text="SAVE 25"></s-clipboard-item>
Was this page helpful?