Copy button

A commercial license is required to use Tailwind Plus Elements.

Copy any text snippet to the clipboard with a single click.

Component API

<el-copyable>

Wraps the text content that should be copied to the clipboard when the copy command is triggered.

Commands
`--copy`	Copies the text to the clipboard.

<button>

A button that triggers the copy operation when clicked.

Data attributes (Read-only)
`data-copied`	Present for two seconds after the text has been successfully copied.
`data-error`	Present when the copy operation fails for whatever reason.

Examples

Basic example

Use the <el-copyable> component, along with a native <button>, to build a copy button:

<el-copyable id="snippet">npm install @tailwindplus/elements</el-copyable>

<button command="--copy" commandfor="snippet">
  <span class="in-data-copied:hidden">Copy</span>
  <span class="not-in-data-copied:hidden">Copied!</span>
</button>

Getting started

Elements