CopyButton

Copy<template>
  <div class="flex items-center gap-4">
    <CopyButton value="This text will be copied" />
    <CopyButton value="Custom tooltip" tooltip="Click to copy this text" />
    <CopyButton value="Ghost variant" variant="ghost" />
  </div>
</template>

The CopyButton component provides a convenient way to copy text to the clipboard with visual feedback using a tooltip.

Usage

Copy<script setup lang="ts">
import { CopyButton } from '@/components/CopyButton'
</script>

<template>
  <CopyButton value="Text to copy" />
</template>

Examples

Basic

Copy<template>
  <div class="flex items-center gap-4">
    <CopyButton value="This text will be copied" />
    <CopyButton value="Custom tooltip" tooltip="Click to copy this text" />
    <CopyButton value="Ghost variant" variant="ghost" />
  </div>
</template>

Custom Tooltip

You can customize the tooltip text:

Copy<template>
  <CopyButton 
    value="Text to copy" 
    tooltip="Click to copy this text" 
  />
</template>

Variants

The button supports different variants:

Copy<template>
  <CopyButton value="Ghost variant" variant="ghost" />
  <CopyButton value="Default variant" variant="default" />
</template>

API Reference

CopyButton

Behavior

• Shows a Copy icon by default
• Changes to a Check icon when copied
• Tooltip changes from "Copy to Clipboard" to "Copied" after copying
• Uses VueUse's useClipboard composable for clipboard functionality
• Positioned absolutely by default (top-right of parent)

Use Cases

Common use cases for CopyButton:

• Code blocks
• API keys or tokens
• Configuration snippets
• Command examples
• Any text that users need to copy