AIditorEcosystemDocumentationDesign Log
GitHubGet Started
Clipboard Copy
← Documentation
Designer28
Developer13
Plugin Developer20
DevOps6
Contracts5

Clipboard Copy

Clipboard Copy

DesignerDesigner Agent Kit — documentation written for AI agents, readable by humans.

Copy-to-clipboard button with "Copied!" feedback. Headless component — requires import.

Import

<head>
  <script
    type="application/jay-headless"
    plugin="@jay-framework/ui-kit"
    contract="clipboard-copy"
  ></script>
</head>

Usage

<jay:clipboard-copy text="{shareUrl}">
  <button ref="copyBtn" class="copy-btn">
    <span if="!copied">Copy Link</span>
    <span if="copied">Copied!</span>
  </button>
</jay:clipboard-copy>

Required refs: copyBtn

Props: text — the string to copy (bound from page ViewState)

ViewState: copied (boolean) — true for 2 seconds after clicking copy

Accessibility

Use aria-live to announce the copy feedback to screen readers:

<jay:clipboard-copy text="{shareUrl}">
  <button ref="copyBtn" class="copy-btn">
    <span if="!copied">Copy Link</span>
    <span if="copied" aria-live="polite">Copied!</span>
  </button>
</jay:clipboard-copy>

About this document

This page is part of the Jay Stack Agent Kit — documentation generated from the framework source and written primarily for AI agents. The language and structure are optimized for machine consumption — expect precise, specification-style prose rather than narrative documentation. Learn more about the Agent Kit →