Clipboard

Bootstrap 5 Clipboard

Copy to clipboard feature for the latest Bootstrap 5. Let your users easily copy text or links with one click.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Clipboard *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

By adding button with data-mdb-clipboard-init and data-mdb-target attributes you can easily make your text copyable.

Edit in sandbox 
<div class="form-outline" data-mdb-input-init>
  <input type="text" id="copy-target" class="form-control" />
  <label class="form-label" for="copy-target">Type here text to copy</label>
</div>
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target" data-mdb-ripple-init>
  Copy
</button>
// Initialization for ES Users
import { Clipboard, Input, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Clipboard, Input, Ripple });

Copy from element

There is no distinction, whether the element is an input or simply a div element.

Here is text to copy!
Edit in sandbox 
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target-2" data-mdb-ripple-init>
  Copy
</button>
<div id="copy-target-2" class="mt-2">Here is text to copy!</div>
// Initialization for ES Users
import { Clipboard, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Clipboard, Ripple });

Copy from data attribute

By adding data-mdb-clipboard-text to the copying target, you can specify the text to be copied, overriding the text from the targeted element.

Copy text from data-mdb-attr instead of text content.
Edit in sandbox 
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target-3" data-mdb-ripple-init>
  Copy
</button>
<div id="copy-target-3" data-mdb-clipboard-text="This text is from data-mdb-attr!" class="mt-2">
  Copy text from data-mdb-attr despite of text content.
</div>
// Initialization for ES Users
import { Clipboard, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Clipboard, Ripple });

Feedback example

Listen for copied.mdb.clipboard event to perform actions, such as displaying feedback message to users.

Edit in sandbox 
<div
  class="alert fade mt-5"
  id="container-example"
  role="alert"
  data-mdb-alert-init
  data-mdb-color="primary"
  data-mdb-hidden="true"
  data-mdb-autohide="true"
  data-mdb-delay="4000"
  data-mdb-position="top-right"
  data-mdb-width="25%"
>
  Text copied!
</div>

<div class="form-outline" data-mdb-input-init>
  <input type="text" id="copy-target-4" class="form-control" />
  <label class="form-label" for="copy-target-4">Type here text to copy</label>
</div>
<button id="myExample" class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target-4" data-mdb-ripple-init>
  Copy
</button>
import { Alert, Clipboard, Input, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Clipboard, Input, Ripple });

const myExample = document.querySelector('#myExample');
const alertInstance = Alert.getInstance(document.querySelector('#container-example'));

myExample.addEventListener('copied.mdb.clipboard', ()=> {
  myExample.innerText = 'COPIED!'
  alertInstance.show()
  setTimeout(() => {
    myExample.innerText = 'COPY'
  }, 4000);
})
const myExample = document.querySelector('#myExample');
const alertInstance = mdb.Alert.getInstance(document.querySelector('#container-example'));

myExample.addEventListener('copied.mdb.clipboard', ()=> {
  myExample.innerText = 'COPIED!'
  alertInstance.show()
  setTimeout(() => {
    myExample.innerText = 'COPY'
  }, 4000);
})

Clipboard - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
import { Clipboard, initMDB } from "mdb-ui-kit";
initMDB({ Clipboard });
import 'mdb-ui-kit';

Usage

Via data attributes

Using the Clipboard method doesn't require any additional JavaScript code - simply add data-mdb-clipboard-init attribute to element you want to copy and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target">
  Copy
</button>

Via JavaScript

Edit in sandbox 
const myClipboard = new Clipboard(document.getElementById('clipboard'), options);
const myClipboard = new mdb.Clipboard(document.getElementById('clipboard'), options);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
$(document).ready(() => {
  $('.example-class').clipboard(options);
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-clipboard-target="".

Name Type Default Description
clipboardTarget String | null 'null' Points an element from which you will copy text.

Methods

Name Description Example
dispose Manually deletes an instance of clipboard myClipboard.dispose()
getInstance Static method which allows you to get the clipboard instance associated to a DOM element. Clipboard.getInstance(myClipboardEl)
getOrCreateInstance Static method which returns the clipboard instance associated to a DOM element or create a new one in case it wasn't initialized. Clipboard.getOrCreateInstance(myClipboardEl)
Edit in sandbox 
const myClipboardEl = document.getElementById('myClipboard');
const clipboard = new Clipboard(myClipboardEl);
clipboard.dispose();
const myClipboardEl = document.getElementById('myClipboard');
const clipboard = new mdb.Clipboard(myClipboardEl);
clipboard.dispose();

Events

Name Description
copied.mdb.clipboard This event fires immediately after copying text.
Edit in sandbox 
const myClipboardEl = document.getElementById('myClipboard')
myClipboardEl.addEventListener('copied.mdb.clipboard', function (e) {
  // do something...
})