Craft

The economics of a copy button

Every code block on this site copies. Here is why that one affordance out-earns everything else on the page combined.

Beginner1 min read (computed · recorded 5)updated 2026-09-12copydxaffordances

by Motif Editors

revised 2026-09-12 — First publication in bank-3 batch 4.

Key takeaways

— Copy converts reading into building — the smallest bridge between the two.
— Confirm in place and announce once.
— Copy exactly what renders, with provenance when it matters.

The unit of gratitude

A copy button converts reading into building. It is the smallest possible bridge between 'this is nice' and 'this is in my project', and the site's copy log exists because that bridge is the product. The log records what people take — which is the truest popularity metric the site has, and the one it prints.

The details that make it honest

It confirms in place ('✓ Copied') and announces once — no toast storm on a drag-select spree.
It copies exactly what is rendered, not a prettier version that doesn't compile.
The copied snippet carries its provenance when it should: file, version, licence line.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

Copy Icon Buttonpractice Split Button Menupractice Ripple Buttonpractice

Keep learning

All guides Try the interactive Lab