Clipboard

Copy-to-clipboard button with a brief success state.

ExamplesCodeUsageChangelog

Button variant

Shows "Copy" text that transitions to "Copied!" for successDuration milliseconds.

Tailwind v4

<Clipboard text="Hello, world!" />

Icon variant

An icon-only button — useful inside compact layouts or alongside code blocks.

Tailwind v4

<Clipboard text="npm install jetpack-ui" variant="icon" />

Copying arbitrary content

Pass any string — API keys, snippets, URLs, etc.

sk-ant-api-xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Tailwind v4

<div class="token-row">
  <code>{{ apiKey }}</code>
  <Clipboard :text="apiKey" variant="icon" />
</div>

Custom success duration

Adjust how long the "Copied!" state is visible (milliseconds).

Tailwind v4

<Clipboard text="..." :successDuration="800" />

Props

Prop	Type	Default	Description
text	string	required	The text written to the clipboard on click
successDuration	number	2000	How long (ms) to show the success state
variant	'icon' | 'button'	'button'	'button' shows a text label; 'icon' shows only the clipboard icon