Skip to main content

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

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to id
id
string

A unique identifier for the element.

Anchor to text
text
string
Default: ''

Plain text to be written to the clipboard.

Anchor to eventsEvents

Learn more about registering events.

Anchor to copy
copy
<typeof tagName>

Callback run when the copy to clipboard succeeds.

Anchor to copyerror
copyerror
<typeof tagName>

Callback run when the copy to clipboard fails.

Examples
<s-button commandFor="discount-code">Copy discount code</s-button>
<s-clipboard-item id="discount-code" text="SAVE 25"></s-clipboard-item>

Preview

Was this page helpful?