#Copy Button

Copies code, commands, or identifiers and reports pending, success, and failure in the same action location.

npm install @a3s-lab/ui

<button
  type="button"
  class="btn copy-button"
  data-copy-text="npm install @a3s-lab/ui"
  data-copy-success="Copied"
  data-copy-error="Copy failed"
  data-copy-reset="1600"
>
  <span data-copy-label>Copy command</span>
  <span data-copy-feedback aria-live="polite"></span>
</button>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

<button
    type="button"
    class="btn copy-button"
    data-copy-empty-demo="en"
    data-copy-text=""
    data-copy-success="Copied"
    data-copy-error="Copy failed"
    data-copy-reset="1600"
  >
    <span data-copy-label>Copy empty value</span>
    <span data-copy-feedback aria-live="polite"></span>
  </button>

#Usage

<button
  type="button"
  class="btn copy-button"
  data-copy-text="npm install @a3s-lab/ui"
  data-copy-success="Copied"
  data-copy-error="Copy failed"
  data-copy-reset="1600"
>
  <span data-copy-label>Copy command</span>
  <span data-copy-feedback aria-live="polite"></span>
</button>

While data-state="copying" / aria-busy="true", repeated activation is ignored. An empty source sets error without writing the clipboard. data-copy-reset returns the control to ready after success feedback.

#Standalone controller

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/copy-button";

const component = document.querySelector(".copy-button");
component.getState();

The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

#Contract

#Product boundary

Copy must not disguise download, sharing, or authorization. The host explicitly supplies sensitive values; the component never reads the clipboard or protected data on its own.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Keyboard Enter/Space activates the native button. Feedback stays in the same control via aria-live. Copying announces busy state without changing control geometry; success and failure remain text, not color alone.