Clipboard API

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

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