#Copy Button

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

npm install @a3s-lab/ui@0.4.0

<button class="btn copy-button" data-copy-text="npm install @a3s-lab/ui@0.4.0" data-copy-success="Copied" data-copy-error="Copy failed">
  <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";

#Usage

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

#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

The label keeps its action meaning while a live region reports the result. Failure copy explains that the browser rejected copying and leaves a retry or manual-selection path.