How It Works
Refer to the Clipboard API documentation for details.
Programmatic
export default function Default() {
async function handleCopy() {
const data = 'Hello World!';
await navigator.clipboard.writeText(data);
alert(`Copied "${data}" to clipboard!`);
}
return (
<button className="btn preset-filled" onClick={handleCopy}>
Copy to Clipboard
</button>
);
}<script lang="ts">
async function handleCopy() {
const data = 'Hello World!';
await navigator.clipboard.writeText(data);
alert(`Copied "${data}" to clipboard!`);
}
</script>
<button class="btn preset-filled" onclick={handleCopy}>Copy to Clipboard</button>Using Inputs
import { useState } from 'react';
export default function Input() {
const [value, setValue] = useState('Hello Skeleton');
async function handleCopy() {
await navigator.clipboard.writeText(value);
alert(`Copied "${value}" to clipboard!`);
}
return (
<div className="flex items-center gap-4">
<input type="text" className="input" value={value} onChange={(e) => setValue(e.target.value)} />
<button className="btn preset-filled" onClick={handleCopy}>
Copy
</button>
</div>
);
}<script lang="ts">
let value = $state('Hello Skeleton');
async function handleCopy() {
await navigator.clipboard.writeText(value);
alert(`Copied "${value}" to clipboard!`);
}
</script>
<div class="flex items-center gap-4">
<input type="text" class="input" bind:value />
<button class="btn preset-filled" onclick={handleCopy}>Copy</button>
</div>