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

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?