OneTaskBy Tim King · Updated
Copy to Clipboard Button Generator
Copy Code Button Using navigator.clipboard.writeText, With a Copied Message
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Copy to Clipboard Button Generator works
A copy to clipboard button saves visitors from dragging a selection over install commands, coupon codes or share links. Choose whether it copies a code block, a text field or a fixed string, set the wording and colours, and click the preview to try it before copying the code.
The output is a style block, the button markup and a short script. The script finds every element
with the copy-btn class, so one copy of it runs any number of buttons on the page.
How the copy to clipboard button works
On click the script reads the text to copy: from the element named in data-copy-target for a
code block or field, or from data-copy-text for a fixed string. It passes that to
navigator.clipboard.writeText(), which returns a promise. When the promise resolves, the label
switches to the confirmation text and the button takes the copied colour, then both reset after
the time you set.
Accessibility
The button is a real button element, so it works with the keyboard and screen readers without
extra roles. The label sits in an aria-live="polite" region, so the change to "Copied!" is
announced. The icon is aria-hidden, because the text already says what the button does.
Several buttons on one page
Give each code block or field its own id and point each button's data-copy-target at it, for
example #install-cmd and #config-snippet. Include the script once, at the end of the body.
FAQ
Why does the copy button do nothing on my site?
The Clipboard API only works in a secure context: pages served over HTTPS, or localhost while
you develop. On plain HTTP navigator.clipboard is undefined. It also needs a real user click, so
calling it from a timer or on page load is blocked.
Does the copy to clipboard button work in all browsers?
navigator.clipboard.writeText() works in every current version of Chrome, Edge, Firefox and
Safari, on desktop and mobile. The old document.execCommand("copy") method is deprecated and is
only worth adding if you must support browsers from before 2020.
Can I add a copy button to every code block automatically?
Yes. Loop over document.querySelectorAll("pre > code"), wrap each in a div with the
copy-code class, give the code an id, and append a button whose data-copy-target points at it.
Then run the generated script after that loop so it picks up the new buttons.
Is copying to the clipboard a privacy risk for visitors?
Writing to the clipboard is allowed on a click because the visitor asked for it. Reading the clipboard is different: it needs a separate permission prompt, and this button never reads it. It only replaces what is on the clipboard with your text.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
CSS Tooltip Generator
Pure CSS tooltips from a data attribute, with an arrow.
HTML Entity Encoder
Escape and unescape HTML entities in any text.
UTM Campaign URL Builder
Build correctly encoded UTM campaign links with consistent naming.
Loading Screen Generator
Full-page preloader overlay that fades out when the page loads.