Copy to clipboard button demo

Copy to clipboard

Copy buttons: BEFORE vs AFTER

Goal: clear action + clear outcome, without stealing focus.

Copy target Share URL Invite code Code snippet

BEFORE (fragile) Alert-only feedback

Problems:

No inline confirmation (can be missed).
Doesn’t handle copy failure gracefully.
Often implemented on <div>/<span> instead of <button>.

Value to copy

Outcome: maybe copied (only an alert).

AFTER (accessible) Status + fallback

Principles:

Use a real <button> with a clear label.
Announce success/failure via role="status" (polite).
Fallback when Clipboard API is unavailable.

Value to copy

Copies the exact value above.

Ready.

What if copying fails?

You can still select the value and copy it manually. The demo uses a best-effort fallback.

Autoplay note: browsers block copying without a user gesture. If you open ?autoplay=1, this demo will pre-select the AFTER panel, but it will not auto-copy.

Share this demo