@loomidev/clipboard

<loomi-clipboard> wraps text or content and appends a copy icon button. When clicked, it copies the wrapped text and briefly shows subtle copied feedback.

npm install @loomidev/clipboard lit

import "@loomidev/clipboard";

Basic Usage

<loomi-clipboard>INV-2048</loomi-clipboard>

Copy Wrapped Content

If the component wraps a div, it copies the text content of that div.

<loomi-clipboard>
  <div>https://example.com/invite/team-alpha</div>
</loomi-clipboard>

Explicit Value

Use value when the visible content differs from the clipboard value.

<loomi-clipboard value="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA...">
  <span>SSH key fingerprint copied from account settings</span>
</loomi-clipboard>

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

| Attribute | Default | Description | | -------------- | ------------------- | ------------------------------------------------------------- | | value | (blank) | Explicit clipboard value. Falls back to slotted text content. | | copy-label | Copy to clipboard | Accessible label before copy. | | copied-label | Copied | Feedback text and accessible label after copy. | | disabled | false | Disables the copy button. (boolean) |

Slots

| Slot | Description | | ----------- | ------------------------------------ | | (default) | Content placed inside the component. |

Events

| Event | Detail | Description | | ------------------ | ------------------ | ---------------------------------- | | loomi-copied | { value } | The value was copied successfully. | | loomi-copy-error | { value, error } | Copying failed. |

document.querySelector("loomi-clipboard").addEventListener("loomi-copied", (event) => {
  console.log(event.detail.value);
});

Dependencies

• @loomidev/core
• @loomidev/icons