Proposal: Button attribute to store text that can be copied to clipboard on trigger (click/enter key)

[runofthemillgeek]

Proposal

<button copytext="+0123456789">Copy</button>

This will copy the text provided in the attribute to the clipboard and show a native browser toast/hint for feedback.

Context

Quite a lot of "Copy to Clipboard" buttons copy the same plaintext described adjacent to them and then show a hint (or sometimes none) once the action is performed. At times, these are obscured for privacy (eg. passwords, secret keys) but ultimately, the functionality needed is pretty straightforward—copy some plain text that's already there in the document.

It's a lot of additional work to implement this simple functionality in JavaScript for these cases and it has a perceived impact on page performance when the script is bundled as part of other code. A good example of this is Stripe's test cards doc page which takes quite a lot of time to load. The script for the copy functionality is not inlined due to which, clicking the button does nothing in the initial seconds which leads to a frustrating experience. I have experienced this on multiple occasions on multiple websites.

Adding this attribute would mean users don't have to code this themselves which is error-prone, will increase actual and perceived page load time and will give frustrating experiences when the button doesn't work. In addition, the browser can give feedback in the form of a toast/notification about the action performed as well.

Related notes

Haven't given too much thought as to any big downsides since I'm new to this, but:

1. This could also be an element but I think would be fine semantically being an attribute.
2. Developers should be able to call event.preventDefault() to cancel the copy action if they need.
3. Probably could exist in more than just <button> but not sure if that's needed.
4. Shouldn't have issues with permissions since clipboard-write is anyway granted for active tabs.

[Yay295]

Copying data to the clipboard isn't that complicated:

navigator.clipboard.writeText("<empty clipboard>").then(function() {
  /* clipboard successfully set */
}, function() {
  /* clipboard write failed */
});

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

The Stripe page takes a while to load because it has to parse almost 5MB of JavaScript. For what it's worth, it still loads almost instantly for me.

[runofthemillgeek]

Copying data to the clipboard isn't that complicated:

navigator.clipboard.writeText("<empty clipboard>").then(function() {
  /* clipboard successfully set */
}, function() {
  /* clipboard write failed */
});

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

The Stripe page takes a while to load because it has to parse almost 5MB of JavaScript. For what it's worth, it still loads almost instantly for me.

My point is this still needs JavaScript and that's going to be a bottleneck and that would mean if the handler code is not yet loaded and executed, nothing happens when you click it. I'm on a pretty fast internet but when it's a bit iffy or when there's a lot of work happening on my mac, the loading is going to be slow. You can throttle it and see the effect if you can't perceive it right away.

I think for these cases, would be pretty nice to not have to write JS. Makes authoring such pages a lot simpler as well.

[runofthemillgeek]

This use case came up again today while updating my home page and my immediate thought this time was having something like the mailto: in anchor tags. Like:

<a href="copy:https://example.com">Copy link to clipboard</a>

Though, I guess that might be abusing anchor tags further.

I think the original proposal could be improved though, by reusing existing button attributes but having a new type="copy":

<button type="copy" value="https://example.com">Copy link to clipboard</button>

Might be easy to polyfill too, made a scrappy demo here: https://output.jsbin.com/wugucujive/1

[annevk]

Perhaps this could be a command…

cc @keithamus @lukewarlow

[keithamus]

I'd love to be able to get https://github.com/github/clipboard-copy-element into the web platform 😉

[lukewarlow]

openui/open-ui#952 - I had a similar thought previously. It feels like it'd be a nice capability to have especially given how common a pattern it is. There's some specifics to work out but I'm very supportive of the idea of a copy command button.

[keithamus]

@smaug----, @mfreed7 - do you think you'd both be supportive of this enough for us to work on a proposal?

[runofthemillgeek]

I wasn't aware command/commandfor are things now, looks like a nice place to tack this and probably more flexible. Need to dig in deeper tho.

Happy to give a helping hand as well, but pretty new to the process :) @lukewarlow @keithamus @annevk

[mfreed7]

@smaug----, @mfreed7 - do you think you'd both be supportive of this enough for us to work on a proposal?

I'd be supportive. Particularly if there's a good way to build this into command. I'd guess it'd be something like

<button commandfor="foo" command="copy-to-clipboard">
<div id=foo>
   This text content <span>gets copied</span>
</div>
<!-- Clicking the button puts "This text content gets copied" onto the clipboard -->

or similar? Or does it copy the full HTML, not just the inner text? Anyway, details. I'm supportive of putting together a proposal.

[lukewarlow]

I think it'd copy inner text with maybe some special casing that if it's pointing to itself it copies it's value attribute? (The open UI issue discussed a few scenarios from GitHubs one) But yeah we can discuss it further and put something together.

[karlcow]

Some recent articles about this feature.
https://whitep4nth3r.com/blog/how-to-build-a-copy-code-snippet-button/
https://dbushell.com/2025/02/14/copy-code-button/

[domenic]

It feels like somewhat of a shame to only copy plain text, given that clipboards can support HTML. If plaintext is indeed the desired behavior, maybe that should be signaled in the name, so that we don't block a future version which copies HTML.

[karlcow]

clipboards can support HTML

yes but write() for html is not well-defined and not fully interoperable. So copy text is a low hanging fruit.