Clipboard
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.
Anchor to propertiesProperties
- string
A unique identifier for the element.
- Anchor to texttextstringDefault: ''
Plain text to be written to the clipboard.
Was this section helpful?
Anchor to eventsEvents
Learn more about registering events.
- Anchor to copycopyCallbackEventListener<typeof tagName>
Callback run when the copy to clipboard succeeds.
- Anchor to copyerrorcopyerrorCallbackEventListener<typeof tagName>
Callback run when the copy to clipboard fails.
CallbackEventListener
(EventListener & {
(event: CallbackEvent<TTagName, Event> & TData): void;
}) | nullCallbackEvent
TEvent & {
currentTarget: HTMLElementTagNameMap[TTagName];
}Was this section helpful?
Code
<s-button commandFor="discount-code">Copy discount code</s-button>
<s-clipboard-item id="discount-code" text="SAVE 25"></s-clipboard-item>
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>