Copy Button
Button component that copies content from target elements to clipboard.
Hello, World!
package showcase
import "github.com/templui/templui/components/copybutton"
templ CopyButtonDefault() {
<div class="flex items-center gap-4">
<div id="copy-text-default" class="text-sm text-muted-foreground">
Hello, World!
</div>
@copybutton.CopyButton(copybutton.Props{
TargetID: "copy-text-default",
})
</div>
}
Installation
templui add copybuttonLoad the script once in your layout:
<head>
@copybutton.Script()
</head>import "github.com/templui/templui/components/copybutton"Load the script once in your layout:
<head>
@copybutton.Script()
</head>Examples
With Input
package showcase
import (
"github.com/templui/templui/components/copybutton"
"github.com/templui/templui/components/input"
)
templ CopyButtonWithInput() {
<div class="flex items-center gap-2">
@input.Input(input.Props{
ID: "api-key-input",
Value: "abc123_example_key_xyz789",
Readonly: true,
Class: "max-w-xs",
})
@copybutton.CopyButton(copybutton.Props{
TargetID: "api-key-input",
})
</div>
}
API Reference
Required parameter
Hover for description
CopyButton
Button component that copies content from a target element to the clipboard.
| Name | Type | Default |
|---|---|---|
Unique identifier for the button element. | | - |
Additional CSS classes to apply to the button. | | - |
Additional HTML attributes to apply to the button element. | | - |
ID of the element to copy content from. Automatically detects whether to use .value or .textContent. | | - |