Kappa / Inline Copy Text

Workspace ID

Use in your request.

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

<template>
  <p>
    Use <InlineCopyText value="ws_8f2c4a91" copy-label="Copy workspace ID" /> in your request.
  </p>
</template>

Installation

Install Kappa using the installation guide, then import the component.

Barrel

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

Granular

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

Set value to the exact text to copy. Click the text or its icon to copy it. The icon appears on hover or keyboard focus, then changes to a check during copied feedback. Its space stays reserved so the text does not move.

Use Clipboard Text for a labeled, selectable input. Inline Copy Text is a single button for compact layouts.

The component uses Ark UI Clipboardfor the clipboard value, copy action, and feedback timeout, and Kappa Tooltip for the action label. The required value prop replaces the primitive's editable value API. Native attributes, classes, styles, and event listeners go to the button.

Examples

Row hover

Add data-kappa-copy-group to a parent to reveal its copy icons on hover or focus within. Keep links and other controls beside the copy button.

Simulation workspace

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

<template>
  <div data-kappa-copy-group>
    <a href="/workspaces/ws_8f2c4a91">Simulation workspace</a>
    <InlineCopyText value="ws_8f2c4a91" copy-label="Copy workspace ID" />
  </div>
</template>

Custom display

The default slot changes the display. The value prop always supplies the copied text. Use text and inline markup in this slot.

Copy the full ID from a short label.

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

<template>
  <InlineCopyText value="run_20261004_0842_eu_central" copy-label="Copy full run ID">
    run_<strong>0842</strong>…
  </InlineCopyText>
</template>

Text styles

Choose a font, size, and weight. Truncation preserves the full copy value and reserves space for the icon.

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

<template>
  <InlineCopyText value="build_0842" variant="body" size="base" bold icon-visibility="always" />
  <InlineCopyText value="eu-central" variant="secondary" size="xs" />
  <InlineCopyText
    value="run_20261004_0842_eu_central_simulation"
    copy-label="Copy long run ID"
    truncate
    style="max-inline-size: 12rem"
  />
</template>

Values and states

Bind value to application data. Set copyLabel and copiedLabel to localize feedback. Disable the control when its value is not available.

Job ID Copies: 0 · Clicks: 0

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

const value = ref("job_0842");
const copyCount = ref(0);
</script>

<template>
  <label>Job ID <input v-model="value" /></label>
  <InlineCopyText
    :value="value"
    copy-label="Copy job ID"
    copied-label="Job ID copied"
    :timeout="800"
    @status-change="copyCount++"
  />
  <span>Copies: {{ copyCount }}</span>
  <InlineCopyText value="job_pending" copy-label="Copy pending job ID" disabled />
  <InlineCopyText
    value="auftrag_0842"
    copy-label="Auftrags-ID kopieren"
    copied-label="Kopiert"
    lang="de"
  />
</template>

Accessibility

Tab focuses the button. Enter and Space copy its value. Focus has a visible outline.
Use copyLabel to name the action, such as “Copy workspace ID”. The button's accessible name also contains its visible text, including custom slot text.
The tooltip and a polite live region provide copied feedback. Icons are hidden from assistive technology.
Keep links, buttons, and inputs outside the default slot. Do not place the component inside another button or link.
Touch devices show the copy icon at all times. Reduced motion disables its fade.

Clipboard access depends on browser permissions. Use HTTPS in production. Ark UI starts copied feedback when the action runs; statusChangeis not a browser write-success or error event.

API Reference

Props

Prop	Type	Default	Description
`value`	`string`	`required`	Exact text to copy. Also displayed without a default slot.
`copyLabel`	`string`	`"Copy to clipboard"`	Accessible action prefix and tooltip text. The visible text remains in the button's name.
`copiedLabel`	`string`	`"Copied"`	Copied tooltip and live announcement.
`disabled`	`boolean`	`false`	Prevents activation and removes the control from the tab order.
`iconVisibility`	`"hover" \| "always"`	`"hover"`	Shows the icon on hover, focus, or copied feedback. Touch devices always show it.
`variant`	`"body" \| "secondary" \| "mono" \| "mono-secondary"`	`"mono-secondary"`	Text font and color.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"sm"`	Text size for all variants, including monospace.
`bold`	`boolean`	`false`	Uses the medium text weight.
`truncate`	`boolean`	`false`	Clips display text to one line. Set a width on the control or its container.
`timeout`	`number`	`3000`	Milliseconds before Ark UI resets copied feedback.

Events and slots

statusChange forwards Ark UI's { copied: boolean } detail when copying is requested. It does not fire when the feedback timeout ends.

The default slot accepts custom inline display content. It does not change the copied value.

Exports

Both imports export InlineCopyText and the types InlineCopyTextProps,InlineCopyTextEmits, InlineCopyTextSlots, InlineCopyTextVariant, and InlineCopyTextSize.