Clipboard is a modern approach to copy text to clipboard. No Flash. No frameworks. For full documentation please check the
										
plugin's site .
 
										
									 
									
									
									
										
										
										 
										
										
										
										Clipboard 's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages:
										
										
										
											
											
												copy 
												
													
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Simply add the attribute
										data-clipboard-targetto an action button with the input element's
										idto get it working. Then add the clipboard JS to initialize it.
										
										
										
										
										
										
											
											
												copy 
												
												
													
														
															
// 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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add
										data-clipboard-action="cut"to the action button element to define a cut action. Then add the clipboard JS to initialize it.
										
										
										
										
										
										
											
											
												copy 
												
												
													
														
															
// 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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add the
										data-clipboard-textto an action button and it will copy the value set on click. Then add the clipboard JS to initialize it.
										
										
										
										
										
										
											
											
												copy 
												
												
													
														
															
// 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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add the attribute
										data-clipboard-targetto an action button with the static element's
										idto get it working. Then add the clipboard JS to initialize it.
										
										
										
											
											
												
													
													
														
														This is a sample static text string to copy!
														
														
														
															
															
																
																	 
															 
															
														 
														
													 
													
												 
											 
											
										 
										
										
										
											
											
												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>