Clipboard MDB Pro component

Clipboard - Bootstrap 5 & Material Design 2.0

Clipboard provides easy to use copy method from input fields or from any element you want.

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

Basic example

By adding button with class name clipboard and data-target attribute you can easily make your text copyable.

        <div class="form-outline">
          <input type="text" id="copy-target" class="form-control" />
          <label class="form-label" for="copy-target">Type here text to copy</label>
        <button class="btn btn-primary clipboard" data-clipboard-target="#copy-target">

Copy from element

There is no difference if element is an input or just div element.

Here is text to copy!

        <button class="btn btn-primary clipboard" data-clipboard-target="#copy-target-2">
        <div id="copy-target-2" class="mt-2">Here is text to copy!</div>

Copy from data attribute

By adding to target of copying data-clipboard-text you can set text to copy insted of text from text content.

Copy text from data-attr instead of text content.

        <button class="btn btn-primary clipboard" data-clipboard-target="#copy-target-3">
        <div id="copy-target-3" data-clipboard-text="This text is from data-attr!" class="mt-2">Copy text from data-attr despite of text content.</div>

Clipboard - API


Via data attributes

        <button class="btn btn-primary clipboard" data-clipboard-target="#copy-target">

Via JavaScript

        var 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.



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


Name Description Example
dispose Manually deletes an instance of clipboard myClipboard.dispose()

        var myClipboardEl = document.getElementById('myClipboard') 
        var clipboard = new mdb.Modal(myClipboardEl)


Name Description
copy.mdb.clipboard This event fires immediately after copying text.

        var myClipboardEl = document.getElementById('myClipboard')
        myClipboardEl.addEventListener('copy.mdb.clipboard', function (e) {
          // do something...


MDB UI KIT also works with module bundlers. Use the following code to import this component:

      import { Clipboard } from 'mdb-ui-kit';