Open-source "copy to clipboard" component examples built with Tailwind CSS
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.
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.
Credits
These components were built by the open-source community from Flowbite and couldn't exist with the awesome Tailwind CSS framework and Flowbite Icons.