Copy button

Copying is the rare action with no visible result. The clipboard is somewhere else, the page does not change, and the value the reader wanted is still sitting exactly where it was. That is why the confirmation is not decoration on this control: it is the only evidence the press worked. The usual form is the button answering for itself, the copy glyph becoming a tick and the word becoming “Copied” for a beat or two, then quietly changing back so the affordance is ready again.

Two details separate a good one from an annoying one. It keeps its size while it changes, because a control that grows by a word rearranges the row under a pointer that may be about to press it again. And it reverts on its own rather than staying ticked, since a permanent tick stops being a report about the last press and starts looking like a state the value is in.

The button belongs beside the thing it copies (an API key, an invoice number, a share URL), close enough that no label is needed to say what “copy” refers to. Icon-only versions still need an accessible name that includes the value’s role, like “Copy project ID”, because “copy” alone is meaningless out of its row. The glyph swap is invisible to a screen reader, so the confirmation has to be announced somewhere: a small live region beside the control, or a status message, rather than the icon alone.

Real implementations write to the clipboard through the asynchronous Clipboard API, which can be refused (an insecure context, a denied permission, a browser that only allows it inside a user gesture). A copy button that cannot report the failure is worse than no button at all, so treat the rejected promise as a real state and not as an edge case. The specimen here changes nothing outside itself: it never touches the system clipboard, because the affordance and its confirming beat are the term, not the transport underneath.