CodeCopyButton

Icon-only copy control for code surfaces: the copy glyph swaps to a check after a successful copy and a live region announces the result.

Status: beta. Group: actions. Markdown version: /design-system/components/code-copy-button.md

When to use

CodeCopyButton copies a string to the clipboard and confirms it in place. CodeBlock and Snippet use it; reach for it directly only when building another code surface.

When not to use

Do not use as a general action button; it only copies.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

CodeCopyButton props
Prop	Type	Default	Description	Required
`value`	`string \| (() => string)`	none	Text to copy, or a function that returns it at click time.	Yes
`label`	`string`	"Copy code" (translated)	Accessible name.	No
`onCopy`	`(text: string) => void`	none	Called with the copied text after a successful copy.	No
`resetAfterMs`	`number`	`1600`	How long the check mark stays, in milliseconds.	No
`size`	`"sm" \| "md"`	`sm`	Size token: sm (28px, code surfaces) or md (40px, beside body text).	No

Variants

Available sizes: sm, md (default sm).

Invalid combinations

The contract records no invalid combinations.

Keyboard

CodeCopyButton keyboard behaviour
Key	Behaviour
Tab	Focuses the button.
Enter or Space	Copies.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

CodeCopyButton rules
Level	Rule	How it is checked
MUST	ARIA: The button is named by label (default "Copy code", translated).	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: A polite live region announces Copied or Copy failed; the glyph swap alone is silent.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-10-25.
SHOULD	Pass value as a getter when the text is expensive to build or changes after render.	Not stated in the contract.
SHOULD	Keep the default label unless the surface copies something other than code, such as a command or a URL.	Not stated in the contract.
SHOULD NOT	Do not put it on plain prose; selection already covers copying text.	Not stated in the contract.
SHOULD NOT	Do not rely on the check mark alone to report success; the live region is part of the control.	Not stated in the contract.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { CodeCopyButton } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/content exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.
Also available as the custom element <dt-code-copy-button>; see the custom elements manifest.