Tailwind CSS Copy to Clipboard - Flowbite

The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element.

Use cases for websites can be found in the examples below and they include copying code installation commands, API keys, URLs, addresses, contact details, sharing course URLs inside a modal and more.

These components are built with Tailwind CSS and Flowbite and can be found on the internet on websites such as Bitly, Cloudflare, Amazon AWS and almost all open-source projects and documentations.

Default copy to clipboard #

Make sure that you add the data-copy-to-clipboard-target="elementID" data attribute to the trigger element (ie. the button) to initialize the JS behavior where the elementID is the ID of the element where the source text can be found (such as input field).

Use this example to copy the content of an input text field by clicking on a button and update the button text by applying the JavaScript code from the tab below based on the updateOnCopyCallback() function callback from the Flowbite JS API.

Input with copy button #

This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied.

If you also want to update the text inside the tooltip and the icon, then you need to apply the JavaScript code based on the updateOnCopyCallback() function callback from the Flowbite JS API.

Copy button with text #

Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied. Make sure that you also apply the custom JavaScript code below to enable the success and default message states.

Input group with copy #

This example can be used to show a copy to clipboard button inside an input group which has a label positioned inside the input field. The icon inside the button will switch to a success state if you also apply the custom JavaScript code below.

URL shortener input group #

Use this example to copy a shortened URL to the clipboard by clicking on a button with an icon positioned inside the input field and also show a tooltip with a message when the text has been copied.

Copy source code block #

This example can be used to copy and paste code inside a <pre> and <code> block by clicking on a button with an icon position inside the block and also show a tooltip with a message when the text has been copied.

You need to add an extra data-copy-to-clipboard-content-type="innerHTML" data attribute to the trigger element (ie. the button) to specify that the content that is to be copied is from the innerHTML of the target element (ie. the code block).

You also need to add the data-copy-to-clipboard-html-entities="true" option to the trigger element so that the copied text will be decoded from HTML entities to plain text that will work inside your code editor.

'use client';

import Link from 'next/link';
import { Navbar } from 'flowbite-react';

function Component() {
  return (
    <Navbar fluid rounded>
      <Navbar.Brand as={Link} href="https://flowbite-react.com">
        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Link href="#" active>
          Home
        </Navbar.Link>
        <Navbar.Link as={Link} href="#">
          About
        </Navbar.Link>
        <Navbar.Link href="#">Services</Navbar.Link>
        <Navbar.Link href="#">Pricing</Navbar.Link>
        <Navbar.Link href="#">Contact</Navbar.Link>
      </Navbar.Collapse>
    </Navbar>
  );
}

Card with API keys #

Use this example to show multiple input field elements that have the copy to clipboard button inside a card component for more complex applications where you need to copy API keys, account IDs and more.

Make sure that you also apply the custom JavaScript code with the function callback to enable the success and default message states for each input field and copy button.

Copy contact details #

This example can be used to copy the text content (ie. contact details) inside of the <address> field by clicking on the copy to clipboard button positioned inside of the address card.

Make sure that you set the data-copy-to-clipboard-content-type="textContent" data attribute to the trigger element (ie. the button) to specify the source of the content that is to be copied.

Copy button with modal #

Use this example to show an input field where you can copy the URL of the current page and also show a modal with the copied URL when the copy button is clicked.

JavaScript behaviour #

Use the CopyClipboard object from the Flowbite JS API to create a component with a trigger element (ie. an input field, code blocks, address tag) and target element (ie. button or text) where the content of the target element is copied to the clipboard when the trigger element is clicked.

Object parameters #

Use the object parameters from the CopyClipboard object to set options such as the content type of the text that is to be copied (ie. value of an input field, text content or inner HTML) and other options.

Options #

Use these optional options for the CopyClipboard object to set the content type from where the text will be copied from, an optional HTML decoder for code blocks and function callbacks to set success and default messages.

Methods #

Use the following methods from the CopyClipboard component to programmatically work with the component such as copying the text on demand or updating the callback function.

Example #

Check out the following example to learn how to create a new CopyClipboard component via the Flowbite JavaScript API and set up the class, options, and methods to programmatically work with the component.

Next step is to create a new instance of a CopyClipboard object using the parameters we have set above.

Set the event listeners on the button to copy the text from the input field:

Now you can programmatically call the methods of the CopyClipboard component:

HTML Markup #

Here is an example of the HTML markup that you can use for the JavaScript example above.

TypeScript #

If you’re using the TypeScript configuration from Flowbite then you can import the types for the CopyClipboard object, parameters and its options.

Here’s an example that applies the types from Flowbite to the code above: