HyCopyButton

Usage examples on this page are written for Lit / plain HTML (<hy-copy-button>). The same component ships as HyCopyButton in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A button that copies a string to the clipboard with built-in feedback.

Copies either a static value or — via from — the resolved value of another element by id (from="tok", from="tok.value", from="link[href]"), runs a rest → success → error feedback machine that auto-reverts after feedback-duration, swaps the icon per state, and surfaces the state label through a built-in hy-tooltip (never title=).

Key Features:

• value (static) or from (resolve another element by id / property / attribute)
• rest → success → error machine with auto-revert
• Per-state icon names + a11y/tooltip labels
• Optional transform to wrap/trim before copy (e.g. v => \var(${v})``)
• size / emphasis forwarded to the inner hy-icon-button

Examples

Copy a static value

<hy-copy-button value="--hy-background-brand-rest"></hy-copy-button>

Copy the resolved value of another element

<code id="tok">#4f46e5</code> <hy-copy-button from="tok"></hy-copy-button>

API

Properties

Property	Attribute	Type	Default	Description
value	value	string | undefined	—	Static string to copy. Ignored when from resolves a value.
from	from	string | undefined	—	Copy from another element by id. Forms: id, id.prop, id[attr]. Resolved within the copy button's root (document or shadow root).
feedbackDuration	feedback-duration	number	1000	Auto-revert delay (ms) for the success/error state.
copyIcon	copy-icon	string	'copy'	Rest-state icon name.
successIcon	success-icon	string	'check'	Success-state icon name.
errorIcon	error-icon	string	'close'	Error-state icon name.
copyLabel	copy-label	string	'Copy'	Rest-state a11y + tooltip label.
successLabel	success-label	string	'Copied'	Success-state a11y + tooltip label.
errorLabel	error-label	string	'Could not copy'	Error-state a11y + tooltip label.
disabled	disabled	boolean	false	Whether the button is disabled.
size	size	'small' | 'medium' | 'large'	'medium'	Size forwarded to the inner icon-button.
emphasis	emphasis	'solid' | 'soft' | 'outlined' | 'tinted' | 'plain'	'plain'	Emphasis forwarded to the inner icon-button.
tooltipPlacement	tooltip-placement	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'	'top'	Tooltip placement.
transform	—	(raw: string) => string | undefined	—	Transform the resolved value before copying. Property-only (not an attribute).

Events

Event	Detail	Description
copy	—	Fired after a successful copy. Detail: { value: string }
error	—	Fired when the clipboard write fails (non-bubbling; listen on the element). Detail: {}

CSS Parts

Part	Description
base	The host wrapper.

CSS Custom Properties

Property	Description
--hy-copy-button-success-color	Icon color in the success state.
--hy-copy-button-error-color	Icon color in the error state.