Copy to Clipboard

Last updated:

Practical patterns for copy actions with clear labels, feedback, and accessible status announcements.

01 — Foundation

Copy actions need confirmation

Users should know what was copied and that it worked — not wonder whether anything happened.

Copy-to-clipboard helps users grab codes, links, and IDs quickly. Without clear feedback, people click again, paste nothing, and blame the product. Treat copy as a small async action with visible success and failure states.

02 — Control

Buttons, labels, and feedback

Icon-only copy buttons fail accessibility and discoverability.

  • visible label — “Copy link”, “Copy API key” — not a lone icon
  • use button type="button" — copying is an action, not navigation
  • confirm success — “Copied” text change or status message, not only colour
  • reset label after a few seconds so the control stays understandable 
<button type="button" aria-describedby="copy-status">
    Copy link
</button>
<p id="copy-status" role="status" aria-live="polite"></p>

03 — Implementation

Clipboard API and fallbacks

Feature detection beats assuming every browser supports async clipboard writes.

  • prefer navigator.clipboard.writeText in secure contexts with permission handling
  • provide fallback — select-and-copy instructions — when the API is unavailable
  • show specific failure — “Copy failed. Select the text below.”
  • never copy secrets silently; confirm what will be placed on the clipboard

04 — Accessibility

Accessible copy patterns

Status updates must reach assistive technology without stealing focus.

  • announce “Copied” via role="status" or aria-live="polite"
  • do not move focus away from the user's task unless necessary
  • ensure copied values are also available as plain text users can select manually

05 — Review

Before you approve

A short checklist for copy-to-clipboard in code review.

  • labelled button with clear success and failure feedback
  • fallback when clipboard API is unavailable
  • status announced appropriately — see Async Actions