Kongponents

Copy ​

KCopy is a component that displays provided text and allows a user to copy it to their clipboard.

12345-6789-ABCD-EFGH-PQRSTUV-WXYZ
html
<KCopy :text="text" />

Props ​

text ​

The copyable text.

format ​

Determines the display format of the copyable text. The component can take the following format values:

  • default
  • hidden
  • redacted
  • deleted

default ​

Displays regular copyable text.

12345-6789-ABCD-EFGH-PQRSTUV-WXYZ
html
<KCopy :text="text" />

hidden ​

Displays just a copy button without text.

html
<KCopy
  format="hidden"
  :text="text"
/>

redacted ​

Displays *****.

*****
html
<KCopy
  format="redacted"
  :text="text"
/>

deleted ​

Displays *<first-5-chars-of-copyable-text>.

*12345
html
<KCopy
  format="deleted"
  :text="text"
/>

badge ​

Whether or not to display as a badge. Defaults to false.

12345-67...
html
<KCopy
  badge
  truncate
  :text="text"
/>

badgeLabel ​

Text displayed before the copyable text when badge is true.

Service ID:
12345-6789-ABCD-EFGH-PQRSTUV-WXYZ
html
<KCopy
  badge
  badge-label="Service ID:"
  :text="text"
/>

truncate ​

Whether or not the text should be truncated. Defaults to false. If truncate is false the text will be truncated only when badge is true.

12345-67...
html
<KCopy
  truncate
  :text="text"
/>

truncationLimit ​

Number of characters to truncate at. Defaults to 8.

12345-6789-ABCD...
html
<KCopy
  truncate
  :text="text"
  :truncation-limit="15"
/>

If you specify 'auto' for the truncationLimit the text will only truncate if there is not enough space for it to be fully displayed.

Truncated(auto):
http://i.can.haz.cookies/chocolate/chocolate-chip?best=true&ref=a24Sfsdjh382-3hhdsu3-dsda
Truncated(20ch):
http://i.can.haz.coo...
html
<KCopy
  badge
  badge-label="Truncated(auto):"
  truncate
  :text="longUrl"
  truncation-limit="auto"
/>

<KCopy
  badge
  badge-label="Truncated(20ch):"
  truncate
  :text="longUrl"
  :truncation-limit="20"
/>

copyTooltip ​

Tooltip text displayed on hover copy button. If the badgeLabel prop has a value, then the copy tooltip text is Copy {badgeLabel} and the trailing colon from label if one exists will be stripped; otherwise the copy tooltip text is Copy.

Service ID:
12345-6789-ABCD-EFGH-PQRSTUV-WXYZ
html
<KCopy
  :text="text"
  badge
  badge-label="Service ID:"
  copy-tooltip="Copy to clipboard"
/>

textTooltip ​

Tooltip text displayed on hover over the text.

12345-67...
html
<KCopy
  truncate
  :text="text"
  text-tooltip="Hello!"
/>

successTooltip ​

Tooltip text displayed on successful copy. Defaults to Copied!.

monospace ​

When badge is true, use this prop to control whether the copyable text has JetBrains Mono font or not. Defaults to false.

12345-6789-ABCD-EFGH-PQRSTUV-WXYZ
html
<KCopy badge monospace :text="text" />

Usage ​

copy ​

KCopy exposes copy method that can be used to trigger copy from outside the component. Here is an example of KCopy inside of KButton, clicking on which will trigger KCopy to copy the text.

vue
<template>
  <KButton @click="onButtonClick">
    <KCopy format="hidden" ref="kCopyElement" :text="text" />
  </KButton>
</template>

<script setup lang="ts">
import { KCopy } from '@kong/kongponents'

const text = '12345-6789-ABCD-EFGH-PQRSTUV-WXYZ'

const kCopyElement = ref<InstanceType<typeof KCopy> | null>(null)

const onButtonClick = (): void => {
  kCopyElement.value?.copy()
}
</script>