Copy Button

Button component that copies content from target elements to clipboard.

Source Tailwind CSS JavaScript

Hello, World!

package showcase

import "github.com/templui/templui/internal/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

Install the component
```
templui add copybutton
```
Add the JavaScript to your layout
```
@copybutton.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

With Input

package showcase

import (
	"github.com/templui/templui/internal/components/copybutton"
	"github.com/templui/templui/internal/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>
}

With Code Block

fmt.Println("Hello, World!")

package showcase

import (
	"github.com/templui/templui/internal/components/code"
	"github.com/templui/templui/internal/components/copybutton"
)

templ CopyButtonWithCode() {
	<div class="relative w-full max-w-md">
		@code.Code(code.Props{
			ID:       "code-block-example",
			Language: "go",
		}) {
			{ `fmt.Println("Hello, World!")` }
		}
		@copybutton.CopyButton(copybutton.Props{
			TargetID: "code-block-example",
			Class:    "absolute top-2 right-2",
		})
	</div>
}

API Reference

Required parameter

Hover for description

CopyButton

Button component that copies content from a target element to the clipboard.

Name	Type	Default
`ID` Unique identifier for the button element.	`string`	-
`Class` Additional CSS classes to apply to the button.	`string`	-
`Attrs` Additional HTML attributes to apply to the button element.	`templ.Attributes`	-
`TargetID` ID of the element to copy content from. Automatically detects whether to use .value or .textContent.	`string`	-

Menu

Getting Started

Components

Copy Button

Installation

Examples

API Reference

CopyButton