KCopyButton

示例

Click to copy

Hello World

With custom tooltip

secret-key-123

A button that copies a string value to the clipboard, with optional tooltip feedback.

Props

Name	Type	Default	Description
value	string	— (required)	The text value to copy to the clipboard.
tooltip	string	'Copy'	Tooltip text shown before copying.
successTooltip	string	'Copied!'	Tooltip text shown after a successful copy.
tooltipPlacement	'top' | 'bottom' | 'left' | 'right'	'top'	Placement of the tooltip relative to the copy button.
variant	'ghost' | 'outline' | 'default' | 'secondary' | 'destructive'	'ghost'	Button variant style.
size	'default' | 'sm' | 'lg' | 'icon' | 'icon-sm'	'icon-sm'	Button size.
iconClassName	string	—	Additional CSS classes applied to the copy icon.

Emits

Name	Parameters	Description
—	—	This component does not emit custom events.

Slots

Name	Description
—	This component does not provide slots.

Basic Usage

<script setup>
import { KCopyButton } from '@kK-2004/ui-component'
</script>

<template>
  <KCopyButton
    value="https://example.com/api-key-123"
    tooltip="Copy API key"
    tooltip-placement="bottom"
  />
</template>