Clipboard copy

back edit

Use <clipboard-copy> to copy its own value attribute.

<clipboard-copy class="btn mr-2" value="Copy from value attribute">
  Copy
</clipboard-copy>

Use <clipboard-copy> to copy a link URL.

<clipboard-copy class="btn mr-2" for="link">Copy</clipboard-copy>
<a id="link" href="https://github.com">GitHub</a>

Use <clipboard-copy> to copy an element's text content.

<clipboard-copy class="btn mr-2" for="span">Copy</clipboard-copy>
<span id="span">Content from span tag.</span>

Use <clipboard-copy> to copy an input value.

<clipboard-copy class="btn mr-2" for="input">Copy</clipboard-copy>
<input id="input" value="https://github.com/github/clipboard-copy.git" class="form-control">

Provide copy feedback on <clipboard-copy> with [data-copy-feedback].

<clipboard-copy class="btn" value="Content to be copied" data-copy-feedback="Copied!">
  Copy
</clipboard-copy>

Provide copy feedback on <clipboard-copy> with .js-clipboard-copy.

<clipboard-copy class="btn js-clipboard-copy" value="Content to be copied">
  <span class="js-clipboard-check-icon d-none ml-1"><%= octicon "check" %></span>
  Copy
</clipboard-copy>