Clipboard

If your data is available in a basic type (string, integer, etc), you can provide it directly to the action.

const exampleData: string = 'Your data here.';

<button use:clipboard={exampleData}>Copy</button>

Copying HTML Contents

To copy the innerHTML for an HTML element, we'll need to set a data-clipboard data attribute on your target, then provide element: 'exampleElement' to the action.

<!-- Source -->
<div data-clipboard="exampleElement">(contents)</div>

<!-- Trigger -->
<button use:clipboard={{ element: 'exampleElement' }}>Copy</button>

Copying Input Values

To copy the value of a form input, we'll need to set a data-clipboard data attribute on your target, then provide input: 'dataClipboardId' to the action.

<!-- Source -->
<input type="text" value="(contents)" data-clipboard="exampleInput"></input>

<!-- Trigger -->
<button use:clipboard={{ input: 'exampleInput' }}>Copy</button>