Guide · Open source

How to use clipboard.js: copy buttons for websites

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

clipboard.js is a small JavaScript library that adds copy-to-clipboard buttons to a website. This guide is for web developers who want a copy button on a site or docs page without a large dependency. By the end you will know how to install it, mark up buttons with data attributes, listen for success and error events, and clean up listeners in a single page app.

clipboard.jszenorocha/clipboard.js · ★ 34.1k · MIT Install options & downloads

Quick start

1Install the package. Run npm install clipboard --save in your project, or download the ZIP from the README link.
2Include the script. Add the dist/clipboard.min.js script to your page, or load it from a CDN.
3Mark up the trigger. Add a button with data-clipboard-text or data-clipboard-target to define what gets copied.
4Create the instance. Call new ClipboardJS with a selector such as '.btn' to attach behavior to your buttons.
5Handle events. Listen for success and error events to show feedback to the user.
6Clean up in SPAs. Call destroy() on the instance when a component unmounts.

Install clipboard.js with npm or download it

The simplest route is npm. Run the command below in your project folder to add clipboard.js as a dependency.

If you are not using a package manager, the README says you can download a ZIP file of the project instead.

npm install clipboard --save

Include the script on your page

Include the script located in the dist folder, or load it from a third-party CDN provider listed in the project wiki. The README gives dist/clipboard.min.js as the example file path.

<script src="dist/clipboard.min.js"></script>

Copy text from another element

To copy the content of another element, add a data-clipboard-target attribute to the trigger button. Its value must be a selector that matches the target element.

Then create the instance by passing a selector such as '.btn'. The README notes that you can also pass a single HTML element or a list of elements.

Put data-clipboard-target on the button with a selector like #foo.
Give the target element an id that matches that selector.

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
  <img src="assets/clippy.svg" alt="Copy to clipboard" />
</button>

Copy a fixed string from an attribute

If the text does not live in another element, put it directly in a data-clipboard-text attribute on the trigger. Clicking the button copies that string.

<!-- Trigger -->
<button
  class="btn"
  data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"
>
  Copy to clipboard
</button>

Cut text instead of copying it

Set data-clipboard-action to cut to remove the content from the target. If you leave the attribute out, copy is used. The README states that the cut action only works on input or textarea elements.

copy is the default when data-clipboard-action is omitted.
cut only works on input or textarea targets.

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  Cut to clipboard
</button>

Show feedback with success and error events

The library fires success and error events so you can show feedback or record what was copied. In the success handler, the README calls e.clearSelection() to clear the selection afterward.

The README's example logs e.action, e.text and e.trigger. For a live demo, the README points to the clipboardjs.com site with the console open.

Listen for success to confirm the copy worked.
Listen for error to handle failures, for example by asking the user to press Ctrl+C.

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  e.clearSelection();
});

clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

Set text, target or container from JavaScript

If you prefer not to edit your HTML, pass functions in the options object. The target function must return a Node, and the text function must return a string. The README's container option is for cases like Bootstrap modals or other libraries that change focus.

For single page apps, call destroy() on the instance when components unmount to clean up the events and objects clipboard.js created.

target: return a Node, for example trigger.nextElementSibling.
text: return a string, for example trigger.getAttribute('aria-label').
container: set the focused element when a modal or focus-changing library is used.
destroy(): remove listeners when the component is removed.

new ClipboardJS('.btn', {
  target: function (trigger) {
    return trigger.nextElementSibling;
  },
});

new ClipboardJS('.btn', {
  text: function (trigger) {
    return trigger.getAttribute('aria-label');
  },
});

new ClipboardJS('.btn', {
  container: document.getElementById('modal'),
});

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

Check browser support and degrade gracefully

clipboard.js relies on the Selection API, which the README says all browsers support, and on execCommand, which it lists as supported in Chrome 42+, Edge 12+, Firefox 41+, Internet Explorer 9+, Opera 29+ and Safari 10+.

For older browsers, the README suggests showing a Copied! tooltip on success and a Press Ctrl+C to copy message on error, since the text is already selected. You can call ClipboardJS.isSupported() to decide whether to show the button at all. The README does not include tooltip styling, so you supply that yourself.

if (ClipboardJS.isSupported()) {
  // show copy buttons
}

What people use it for

Adding a copy button to install commands on a documentation page.
Copying a code snippet from a <pre> or input element on a tutorial site.
Copying a fixed string such as a share link or API key stub using data-clipboard-text.
Cutting text from a textarea in a form using the cut action.
Adding copy buttons to a single page app and removing them cleanly on unmount.

Frequently asked questions

How do I install clipboard.js?

Run npm install clipboard --save in your project. If you are not using a package manager, the README says you can download a ZIP file of the project from GitHub and include the dist script.

Is clipboard.js free to use?

clipboard.js is released under the MIT licence, as listed on its project page. Check the licence file in the repository for the full terms before using it in your project.

What browsers does clipboard.js support?

The README says it relies on the Selection API, supported by all browsers, and on execCommand, which it lists for Chrome 42+, Edge 12+, Firefox 41+, Internet Explorer 9+, Opera 29+ and Safari 10+. Use ClipboardJS.isSupported() to check at runtime.

Why does my cut button not work?

The README says the cut action only works on input or textarea elements. If your target is another element type, use copy instead, which is the default action.

Does clipboard.js include styles or tooltips?

No. The README states that clipboard.js includes no CSS or built-in tooltip solution, so you need to write your own feedback. The demo site's tooltips were built with GitHub's Primer tooltip styles, which you can reuse if you like that look.

What are alternatives to clipboard.js?

The project's comparison list includes the native Clipboard API, copy-to-clipboard, zeroclipboard and clipboard-polyfill. The native Clipboard API is a browser feature rather than a library, so it is not a drop-in package like clipboard.js.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

clipboard.js suits web developers who want a small, declarative copy button without Flash or a large framework. It is a code library with no interface of its own, so non-developers looking for a finished app should choose something else, and sites that need tooltips or cut on non-input elements will need extra work or a different tool.

Install options & downloads