/api /r tokens.json GitHub

Code Block with Copy

Pre-formatted code block with an inset copy-to-clipboard button that fades in on hover. Uses navigator.clipboard.writeText with a textarea fallback. 'Copied' indicator shows for 1.4 s then reverts.

Live previewrendered from recipe via {tokens} resolution
{{content}}
ARIA notes

The copy button must carry aria-label describing the action ('Copy to clipboard'). After a successful copy, update aria-label or use aria-live='polite' to announce 'Copied' to screen readers. The 1.4 s revert should reset both visual state and aria-label.

The usage tab for this component is not yet authored. Creative Design Contributors — pick this up.

Recipe is at /api/components/code-block-with-copy.json.