Phi
Phi
Inline Copy Text
@dicehub/phiv1.0.0-beta.1

Inline Copy Text

A compact copy control for values that sit inline, such as identifiers in table cells.

<script setup>
import { InlineCopyText } from "@dicehub/phi/components/inline-copy-text";
</script>

<template>
  <InlineCopyText text="0c239dd2-1f6a-4c0b-9f8e-2c1f77bd9a10" />
</template>

Installation

Barrel

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

Granular

import { InlineCopyText } from "@dicehub/phi/components/inline-copy-text";

Usage

<script setup>
import { InlineCopyText } from "@dicehub/phi/components/inline-copy-text";
</script>

<template>
  <!-- Copy a different value than the one shown, and localize the labels. -->
  <InlineCopyText
    :labels="{ copyAction: 'Copy database ID', copied: 'Copied' }"
    text="0c23…9a10"
    text-to-copy="0c239dd2-1f6a-4c0b-9f8e-2c1f77bd9a10"
    @copy="handleCopy"
  />
</template>

The copy icon appears on hover and on keyboard focus, and stays visible on touch devices. After a successful write the icon becomes a check mark for 1.5 seconds and the copied label is announced in a polite live region. Set textToCopy when the displayed value is abbreviated.

For short values that need a framed field and a visible value box, useClipboard Text instead.

Examples

Table cell

The control shrinks inside narrow containers. Keep `min-width: 0` on the cell so the value truncates instead of pushing the table wider.

<template>
  <table>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.name }}</td>
        <td class="cell-id">
          <InlineCopyText :text="row.id" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style>
.cell-id {
  /* The cell must be allowed to shrink, otherwise the value pushes the table wider. */
  min-width: 0;
  max-width: 12rem;
}
</style>

Text variants

Typography comes from the Text component. Headings are not available here: use `body`, `secondary`, `success`, `error`, `mono`, or `mono-secondary`.

<template>
  <InlineCopyText as="strong" bold size="lg" text="body" variant="body" />
  <InlineCopyText text="secondary" variant="secondary" />
  <InlineCopyText text="success" variant="success" />
  <InlineCopyText text="error" variant="error" />
  <InlineCopyText text="mono" variant="mono" />
  <InlineCopyText text="mono-secondary" variant="mono-secondary" />
</template>

Custom labels

Pass `labels` to localize the accessible name and the copied announcement.

<template>
  <InlineCopyText
    :labels="{ copyAction: 'Datenbank-ID kopieren', copied: 'Kopiert' }"
    text="0c239dd2"
  />
</template>

Wrapping

Set `truncate` to false when the full value must stay readable.

<template>
  <!-- truncate={false} lets long values wrap instead of clipping them. -->
  <InlineCopyText :truncate="false" text="0c239dd2-1f6a-4c0b-9f8e-2c1f77bd9a10" />
</template>

API Reference

PropTypeDefaultDescription
textstring-Required. Text shown in the control. It is copied unless textToCopy is set.
textToCopystring-Value written to the clipboard. Defaults to text.
variant"body" | "secondary" | "success" | "error" | "mono" | "mono-secondary""mono-secondary"Text typography. Heading variants are excluded.
as"span" | "code" | "em" | "strong" | "small" | "abbr" | "time""span"Semantic element used for the displayed text inside the button.
size"xs" | "sm" | "base" | "lg"variant defaultText size. Monospace variants accept only lg, matching Text.
boldbooleanfalseBold text for body and semantic color variants. Monospace variants do not accept it.
truncatebooleantrueTruncates the text with an ellipsis instead of wrapping.
labels{ copyAction?: string; copied?: string }-Accessible names before and after copying.
@copy({ text }: { text: string }) => void-Emitted after a successful clipboard write with the copied value. Never emitted when the write fails.
classstring-Forwarded to the button element.