# copyToClipboard

> Copies text from an element a Message footer copy button's `commandfor` targets onto the system clipboard.

```ts
import { copyToClipboard } from "@sdxc/ui/mixins";
```

Writes the text content of a Message footer copy button's `commandfor`
target onto the system clipboard, resolving the target fresh from the
button on every press so it stays correct even as the DOM changes.

## Signature

```ts
copyToClipboard(): MixinDescriptor<HTMLButtonElement>
```

Returns: A mixin descriptor for a Message footer copy button's `mix` prop.

## Examples

```tsx
<div id="reply-1-content">{reply.text}</div>
<button
	type="button"
	commandfor="reply-1-content"
	command={COPY_COMMAND}
	aria-label={t("message.copy")}
	mix={[
		copyToClipboard(),
		on("ui:copy", (event) => {
			announce(event.success ? t("message.copied") : t("message.copyFailed"));
		}),
	]}
>
	<CopyIcon />
</button>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### CopyEvent

Dispatched on a Message footer copy button by copyToClipboard once
a clipboard write settles, carrying success and the attempted text so
consumers can render their own feedback for either outcome.

#### Signature

```ts
new CopyEvent(success: boolean, text: string)
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `success` | `readonly boolean` | `true` once the text reached the clipboard, `false` if the write was rejected or the platform API is unavailable. |
| `text` | `readonly string` | The text copyToClipboard attempted to copy. |

### COPY_COMMAND

Custom Invoker Command a Message footer copy button declares via
`command={COPY_COMMAND}` and `commandfor`, giving the pairing a genuine
invoker relationship in markup, read by copyToClipboard on click.

#### Signature

```ts
const COPY_COMMAND = "--copy" as const
```