Actions

Clipboard

A button that copies a value, or a field's or element's text, and shows and announces the copy.

Class name	Type	Description
`clipboardplf:clipboard`	Component	A copy button that draws a copy icon, and a check while the copy shows

Default

A click copies the text in data-plf-clipboard; for two seconds the label reads Copied and the icon a check.

<button class="btn btn-outline clipboard" data-plf-clipboard="npm install @pelatform/ui">Copy</button>

<button class="plf:btn plf:btn-outline plf:clipboard" data-plf-clipboard="npm install @pelatform/ui">Copy</button>

import { Clipboard } from '@pelatform/react';

export function Example() {
  return <Clipboard variant="outline" value="npm install @pelatform/ui">Copy</Clipboard>;
}

import { Clipboard } from '@pelatform/react/prefixed';

export function Example() {
  return <Clipboard variant="outline" value="npm install @pelatform/ui">Copy</Clipboard>;
}

Icon only

Without a label, the button shows its icon alone and needs aria-label.

#F5A623

<div class="flex items-center gap-2">
  <code>#F5A623</code>
  <button class="btn btn-ghost btn-square btn-sm clipboard" data-plf-clipboard="#F5A623" aria-label="Copy #F5A623"></button>
</div>

<div class="plf:flex plf:items-center plf:gap-2">
  <code>#F5A623</code>
  <button class="plf:btn plf:btn-ghost plf:btn-square plf:btn-sm plf:clipboard" data-plf-clipboard="#F5A623" aria-label="Copy #F5A623"></button>
</div>

import { Clipboard } from '@pelatform/react';

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <code>#F5A623</code>
      <Clipboard variant="ghost" shape="square" size="sm" value="#F5A623" aria-label="Copy #F5A623" />
    </div>
  );
}

import { Clipboard } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <div className="plf:flex plf:items-center plf:gap-2">
      <code>#F5A623</code>
      <Clipboard variant="ghost" shape="square" size="sm" value="#F5A623" aria-label="Copy #F5A623" />
    </div>
  );
}

From a field

data-plf-target names a field, whose value the button copies, or another element, whose text it copies.

Share link

<div class="field">
  <label class="field-label" for="clipboard-link">Share link</label>
  <div class="flex gap-2">
    <input class="input" id="clipboard-link" value="https://ui.pelatform.com" readonly>
    <button class="btn shrink-0 clipboard" data-plf-clipboard data-plf-target="clipboard-link">Copy link</button>
  </div>
</div>

<div class="plf:field">
  <label class="plf:field-label" for="clipboard-link">Share link</label>
  <div class="plf:flex plf:gap-2">
    <input class="plf:input" id="clipboard-link" value="https://ui.pelatform.com" readonly>
    <button class="plf:btn plf:shrink-0 plf:clipboard" data-plf-clipboard data-plf-target="clipboard-link">Copy link</button>
  </div>
</div>

import { Clipboard, Field, Input } from '@pelatform/react';

const link = 'https://ui.pelatform.com';

export function Example() {
  return (
    <Field label="Share link">
      <div className="flex gap-2">
        <Input value={link} readOnly />
        <Clipboard className="shrink-0" value={link}>Copy link</Clipboard>
      </div>
    </Field>
  );
}

import { Clipboard, Field, Input } from '@pelatform/react/prefixed';

const link = 'https://ui.pelatform.com';

export function Example() {
  return (
    <Field label="Share link">
      <div className="plf:flex plf:gap-2">
        <Input value={link} readOnly />
        <Clipboard className="plf:shrink-0" value={link}>Copy link</Clipboard>
      </div>
    </Field>
  );
}

Clipboard needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/clipboard.min.css">
<link rel="stylesheet" href="components/form.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/clipboard.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/clipboard.prefixed.min.css">
<link rel="stylesheet" href="components/form.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/clipboard.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-clipboard`	On a `<button>`: the text to copy, or empty with `data-plf-target`
`data-plf-target`	The id of an element in the same root: a field’s value or another element’s text is copied
`data-plf-copied-label`	The label and announcement after a copy: Copied
`data-plf-copy-error`	Announced when the browser refuses to copy: Copy failed. Select and copy the text.

The script adds a status (role="status") after the button, which announces each copy, and sets data-plf-state="copied" on the button for two seconds, which shows the check. A button with its own icon class first keeps that icon.

Methods

Method	Behavior
`PLF.Clipboard.getOrCreateInstance(button)`	Returns the instance, creating it for valid markup
`PLF.Clipboard.getInstance(button)`	Returns the instance or `null`
`instance.copy()`	Copies the text; resolves `false` when copying failed, another copy is running or the button is disabled
`instance.destroy()`	Restores the label and removes listeners, the status and the copied state

Events

Event	When
`plf:clipboard:copy`	After the text is on the clipboard
`plf:clipboard:copy-error`	When the browser refuses to copy

Each event’s detail:

Property	Value
`instance`	The Clipboard instance
`text`	The text it copied or tried to copy
`reason`	`trigger` for a click, `api` for `copy()`
`trigger`	The button, or `null` from `copy()`

React

Clipboard from @pelatform/react renders this button on a Button, with its status after it.

Prop	Values	Default
`value`	The text a click copies	Required
`copiedLabel`	A text label’s place after a copy, and the announcement	`Copied`
`copyError`	The announcement when the browser refuses to copy	`Copy failed. Select and copy the text.`
`onCopy`	`(text)`, called once the text is on the clipboard	None

The other props are Button’s, className and ref included.