# Clipboard API

Learn how to integrate the native browser clipboard API.

## How It Works

Refer to the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) documentation for details.

## Programmatic

```astro
<button class="btn preset-filled" data-button>Copy to Clipboard</button>

<script>
	// Define your source data
	const sourceData = 'Hello world';

	// Select your trigger element
	const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');

	// Add a click event handler to the trigger
	elemButton?.addEventListener('click', () => {
		// Call the Clipboard API
		navigator.clipboard
			// Use the `writeText` method write content to the clipboard
			.writeText(sourceData)
			// Handle confirmation
			.then(() => console.log('Source data copied to clipboard!'));
	});
</script>

```

## Using Inputs

```astro
<div class="flex items-center gap-4">
	<input type="text" class="input" value="Hello Skeleton" data-source />
	<button class="btn preset-filled" data-trigger>Copy</button>
</div>

<script>
	// Create element references
	const elemButton: HTMLButtonElement | null = document.querySelector('[data-trigger]');
	const elemInput: HTMLInputElement | null = document.querySelector('[data-source]');

	// Add a click event handler to the trigger
	elemButton?.addEventListener('click', () => {
		// Call the Clipboard API
		navigator.clipboard
			// Use the `writeText` method write content to the clipboard
			.writeText(elemInput?.value || '')
			// Handle confirmation
			.then(() => console.log('Input value copied to clipboard!'));
	});
</script>

```