Choose a version:

Clipboard item

The clipboard item component copies text to the buyer's clipboard when triggered by another component. Use clipboard item alongside button or 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 or link.

Support

Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the clipboard item component.

Anchor to id 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.
Anchor to text text string Default: '': Plain text to be written to the clipboard.

Rich text, HTML, and binary content aren't supported.

Anchor to EventsEvents

The clipboard item component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to copy copy <typeof tagName>: A callback fired when the text is successfully copied to the clipboard. Use this to show a confirmation message or update the UI.
Anchor to copyerror copyerror <typeof tagName>: 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.

(EventListener & {
    (event: CallbackEvent<TTagName, Event> & 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.

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to ExamplesExamples

Anchor to Copy a discount code with a buttonCopy 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

html

<s-button commandFor="discount-code">Copy discount code</s-button>

<s-clipboard-item id="discount-code" text="SAVE 25"></s-clipboard-item>

Anchor to Copy an order number with a linkCopy 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

<s-link commandFor="order-number">Copy order number</s-link>

<s-clipboard-item id="order-number" text="ORD-2026-48291"></s-clipboard-item>

Anchor to Copy a referral codeCopy 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

<s-stack>

<s-text>Share your referral code with friends:</s-text>

<s-stack direction="inline" gap="small">

<s-text color="subdued">REF-SHOP-7X9K2</s-text>

<s-button commandFor="referral-code" variant="secondary">Copy code</s-button>

</s-stack>

<s-clipboard-item id="referral-code" text="REF-SHOP-7X9K2"></s-clipboard-item>

Anchor to Best practicesBest 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.

Was this page helpful?