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>