How It Works Refer to the Clipboard API documentation for details. Programmatic PreviewCodeCopy to Clipboard <button class="btn preset-filled" data-button>Copy to Clipboard</button> <script> // Define your source data const sourceData = 'Hello world'; // Select your trigger element const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]'); // Add a click event handler to the trigger elemButton?.addEventListener('click', () => { // Call the Clipboard API navigator.clipboard // Use the `writeText` method write content to the clipboard .writeText(sourceData) // Handle confirmation .then(() => console.log('Source data copied to clipboard!')); });</script> Using Inputs PreviewCode Copy <div class="flex items-center gap-4"> <input type="text" class="input" value="Hello Skeleton" data-source /> <button class="btn preset-filled" data-trigger>Copy</button></div> <script> // Create element references const elemButton: HTMLButtonElement | null = document.querySelector('[data-trigger]'); const elemInput: HTMLInputElement | null = document.querySelector('[data-source]'); // Add a click event handler to the trigger elemButton?.addEventListener('click', () => { // Call the Clipboard API navigator.clipboard // Use the `writeText` method write content to the clipboard .writeText(elemInput?.value || '') // Handle confirmation .then(() => console.log('Input value copied to clipboard!')); });</script>