Components

Copy

A copy button and a status beside it. The status reports the real clipboard result, including when copying is unavailable.

Value and compact feedback

Value feedback repeats what was copied; compact feedback suits a specimen that already shows it.

Used on Palette.

Usage and interface

DemoCopyButton renders span.ui-copy with a ui-button and a ui-copy-status live region. label names the action for assistive technology; feedback="compact" reports “Copied” instead of the value. Inside DemoCopyGroup the buttons report to one shared status and render without a wrapper.

<DemoCopyButton value="var(--color-blue-60)" label="Copy the blue 60 variable">Copy variable</DemoCopyButton>

<span class="ui-copy">  <button type="button" class="ui-button" data-size="sm" aria-label="Copy the blue 60 variable">…Copy variable</button>  <span class="ui-copy-status" role="status" data-result="success">Copied var(--color-blue-60)</span></span>

data-result is success or error; the text always says what happened.