# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Clipboardis a modern approach to copy text to clipboard. No Flash. No frameworks. For full documentation please check the plugin's site.

# Usage

Clipboard's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages:

    <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/plugins/global/plugins.bundle.js"></script>

# Basic Usage

Simply add the attribute `data-clipboard-target`to an action button with the input element's `id`to get it working. Then add the clipboard JS to initialize it.

    // Select elements
    const target = document.getElementById('kt_clipboard_1');
    const button = target.nextElementSibling;

    // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
    var clipboard = new ClipboardJS(button, {
        target: target,
        text: function() {
            return target.value;
        }
    });

    // Success action handler
    clipboard.on('success', function(e) {
        const currentLabel = button.innerHTML;

        // Exit label update when already in progress
        if(button.innerHTML === 'Copied!'){
            return;
        }

        // Update button label
        button.innerHTML = 'Copied!';

        // Revert button label after 3 seconds
        setTimeout(function(){
            button.innerHTML = currentLabel;
        }, 3000)
    });

    <div class="card card-bordered">
        <div class="card-body">
            <!--begin::Input group-->
            <div class="input-group">
                <!--begin::Input-->
                <input id="kt_clipboard_1" type="text" class="form-control" placeholder="name@example.com" value="name@example.com" />
                <!--end::Input-->

                <!--begin::Button-->
                <button class="btn btn-light-primary" data-clipboard-target="#kt_clipboard_1">
                    Copy
                </button>
                <!--end::Button-->
            </div>
            <!--begin::Input group-->
        </div>
    </div>

# Cut Example

Add `data-clipboard-action="cut"`to the action button element to define a cut action. Then add the clipboard JS to initialize it.
This is an example to cut with Clipboard

    // Select elements
    const target = document.getElementById('kt_clipboard_2');
    const button = target.nextElementSibling;

    // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
    var clipboard = new ClipboardJS(button, {
        target: target,
        text: function() {
            return target.innerText;
        }
    });

    // Success action handler
    clipboard.on('success', function(e) {
        const currentLabel = button.innerHTML;

        // Exit label update when already in progress
        if(button.innerHTML === 'Copied!'){
            return;
        }

        // Update button label
        button.innerHTML = 'Copied!';

        // Revert button label after 3 seconds
        setTimeout(function(){
            button.innerHTML = currentLabel;
        }, 3000)
    });

    <div class="card card-bordered">
        <div class="card-body">
            <!--begin::Input-->
            <textarea id="kt_clipboard_2" class="form-control mb-3">This is an example to cut with Clipboard</textarea>
            <!--end::Input-->

            <!--begin::Button-->
            <button class="btn btn-light-primary" data-clipboard-action="cut" data-clipboard-target="#kt_clipboard_2">
                Cut
            </button>
            <!--end::Button-->
        </div>
    </div>

# Predefined Value

Add the `data-clipboard-text`to an action button and it will copy the value set on click. Then add the clipboard JS to initialize it.

    // Select element
    const target = document.getElementById('kt_clipboard_3');

    // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
    clipboard = new ClipboardJS(target);

    // Success action handler
    clipboard.on('success', function (e) {
        const currentLabel = target.innerHTML;

        // Exit label update when already in progress
        if (target.innerHTML === 'Copied!') {
            return;
        }

        // Update button label
        target.innerHTML = 'Copied!';

        // Revert button label after 3 seconds
        setTimeout(function () {
            target.innerHTML = currentLabel;
        }, 3000)
    });

    <div class="card card-bordered">
        <div class="card-body">
            <!--begin::Button-->
            <button id="kt_clipboard_3" class="btn btn-light-primary" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
                Copy to clipboard
            </button>
            <!--end::Button-->
        </div>
    </div>

# Static Element

Add the attribute `data-clipboard-target`to an action button with the static element's `id`to get it working. Then add the clipboard JS to initialize it.
This is a sample static text string to copy!

    // Select elements
    const target = document.getElementById('kt_clipboard_4');
    const button = target.nextElementSibling;

    // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
    clipboard = new ClipboardJS(button, {
        target: target,
        text: function () {
            return target.innerHTML;
        }
    });

    // Success action handler
    clipboard.on('success', function (e) {
        var checkIcon = button.querySelector('.bi.bi-check');
        var svgIcon = button.querySelector('.svg-icon');

        // Exit check icon when already showing
        if (checkIcon) {
            return;
        }

        // Create check icon
        checkIcon = document.createElement('i');
        checkIcon.classList.add('bi');
        checkIcon.classList.add('bi-check');
        checkIcon.classList.add('fs-2x');

        // Append check icon
        button.appendChild(checkIcon);

        // Highlight target
        const classes = ['text-success', 'fw-boldest'];
        target.classList.add(...classes);

        // Highlight button
        button.classList.add('btn-success');

        // Hide copy icon
        svgIcon.classList.add('d-none');

        // Revert button label after 3 seconds
        setTimeout(function () {
            // Remove check icon
            svgIcon.classList.remove('d-none');

            // Revert icon
            button.removeChild(checkIcon);

            // Remove target highlight
            target.classList.remove(...classes);

            // Remove button highlight
            button.classList.remove('btn-success');
        }, 3000)
    });

    <div class="card card-bordered">
        <div class="card-body">
            <!--begin::Row-->
            <div class="d-flex align-items-center flex-wrap">
                <!--begin::Input-->
                <div id="kt_clipboard_4" class="me-5">This is a sample static text string to copy!</div>
                <!--end::Input-->

                <!--begin::Button-->
                <button class="btn btn-icon btn-sm btn-light" data-clipboard-target="#kt_clipboard_4">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen054.svg-->
                </button>
                <!--end::Button-->
            </div>
            <!--end::Row-->
        </div>
    </div>

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now