Clipboard API

<button class="btn preset-filled" data-copy-button-default>Copy to Clipboard</button>

<script>
	const data = 'Hello World!';

	const copyButton = document.querySelector<HTMLButtonElement>('[data-copy-button-default]');

	copyButton?.addEventListener('click', async () => {
		await navigator.clipboard.writeText(data);
		alert(`Copied "${data}" to clipboard!`);
	});
</script>

<div class="flex items-center gap-4">
	<input type="text" class="input" value="Hello Skeleton" data-copy-input />
	<button class="btn preset-filled" data-copy-button-input>Copy</button>
</div>

<script>
	const copyButton = document.querySelector<HTMLButtonElement>('[data-copy-button-input]');
	const inputElement = document.querySelector<HTMLInputElement>('[data-copy-input]');

	copyButton?.addEventListener('click', async () => {
		const data = inputElement?.value || '';
		await navigator.clipboard.writeText(data);
		alert(`Copied "${data}" to clipboard!`);
	});
</script>