Skip to Content

CopyButton

Source

Description

Uses the Clipboard API to copy data to the clipboard. Falls back to writeText if write is not supported and blob.type is text.

props

  • blobParts - array of BlobParts to copy - MDN Reference
  • blob - use a blob in instead of blobParts and options, defaults to new Blob(blobParts, options)
  • class
  • id
  • options - defaults to { type: "text/plain" } - MDN Reference
  • title

slots

name purpose default value
default default Copy
complete displays after copy is complete Copied

example

<script lang="ts">
    import { CopyButton } from "drab";

    let value = "";
</script>

<label for="copyInput" class="label">Text to Copy</label>
<input id="copyInput" class="input mb-4" type="text" bind:value />

<CopyButton class="button button-primary" blobParts={[value]} />