Phi
Phi
Clipboard Text
@dicehub/phiv1.0.0-beta.1

Clipboard Text

A text component with a copy-to-clipboard button.

<script setup>
import { ClipboardText } from "@dicehub/phi/components/clipboard-text";
</script>

<template>
  <ClipboardText text="0c239dd2" />
</template>

Installation

Barrel

import { ClipboardText } from "@dicehub/phi";

Granular

import { ClipboardText } from "@dicehub/phi/components/clipboard-text";

Usage

<script setup>
import { ClipboardText } from "@dicehub/phi/components/clipboard-text";
</script>

<template>
  <ClipboardText text="Copy this text" />
</template>

Examples

Short Text

<script setup>
import { ClipboardText } from "@dicehub/phi/components/clipboard-text";
</script>

<template>
  <ClipboardText text="abc123" />
</template>

API Key

<script setup>
import { ClipboardText } from "@dicehub/phi/components/clipboard-text";
</script>

<template>
  <ClipboardText text="sk_live_51H8..." />
</template>

Copy Alternate Text

<script setup>
import { ClipboardText } from "@dicehub/phi/components/clipboard-text";
</script>

<template>
  <ClipboardText
    text="sk_live_***********"
    text-to-copy="sk_live_51H8_abc123"
  />
</template>

Long Text

<script setup>
import { ClipboardText } from "@dicehub/phi/components/clipboard-text";
</script>

<template>
  <ClipboardText text="https://example.com/very/long/url/path" />
</template>

With Tooltip

Shows a "Copy" tooltip on hover and one anchored "Copied!" status on click. Repeat copies restart the feedback window and bump the existing status instead of stacking another.

<script setup>
import { ClipboardText } from "@dicehub/phi/components/clipboard-text";
</script>

<template>
  <ClipboardText
    text="npm install @dicehub/phi@beta"
    :tooltip="{ text: 'Copy', copiedText: 'Copied!', side: 'top' }"
  />
</template>

API Reference

PropTypeDefaultDescription
textstring-Text displayed in the read-only field and copied by default.
textToCopystring-Alternate clipboard value. Use this when displayed text is masked or shortened.
size"sm" | "base" | "lg""lg"Controls field and copy button height.
tooltip{ text?: string; copiedText?: string; side?: "top" | "bottom" | "left" | "right" }-Shows a hover tooltip and copied feedback near the copy button.
labels{ copyAction?: string }-Accessible labels for the copy action.
@copy(details: { text: string }) => void-Event emitted after a successful copy.