Copy Button

One-click clipboard copy with customizable labels and feedback duration.

<rhx-copy-button>

Examples


                        dotnet add package htmxRazor

<code>dotnet add package htmxRazor</code>
<rhx-copy-button rhx-value="dotnet add package htmxRazor" />

npm install htmxRazor-client

<pre id="install-cmd"><code>npm install htmxRazor-client</code></pre>
<rhx-copy-button rhx-from="#install-cmd code" />


                        https://example.com

<rhx-copy-button rhx-value="https://example.com"
               rhx-copy-label="Copy URL"
               rhx-success-label="URL Copied!" />


                        sk-1234567890abcdef

<rhx-copy-button rhx-value="sk-1234567890abcdef"
               rhx-feedback-duration="5000" />


                        No copying allowed

<rhx-copy-button rhx-value="No copying allowed"
               rhx-disabled="true" />

Property	Type	Default	Description
`rhx-value`	`string`	`-`	Static text to copy to clipboard
`rhx-from`	`string`	`-`	CSS selector of element whose text content to copy
`rhx-copy-label`	`string`	`Copy`	Button label before copy
`rhx-success-label`	`string`	`Copied!`	Button label after successful copy
`rhx-feedback-duration`	`int`	`2000`	Milliseconds to show success label
`rhx-disabled`	`bool`	`false`	Whether the button is disabled