Copy to clipboard

@summonware/ui · copy-to-clipboard · P3 · Forms

Usage

A copy button over the native `navigator.clipboard` API — the reference used the `clipboard.js` library, which exists to work around browsers that no longer need working around. The label flips to a confirmed "Copied" state briefly, `aria-live="polite"` so the confirmation is announced.
import { CopyToClipboard } from '@summonware/ui';

Best practices

DoUse it next to values a user actually pastes elsewhere — an API key, an invoice number, a share link — not next to arbitrary text.
Don'tRely on the visual "Copied" state alone. `aria-live` is what makes the confirmation reach a screen reader user; do not remove it to simplify the markup.

Examples

Common configurations, variations and states.

API key

Click to copy — the label confirms it worked.