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/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 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
`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