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

INV-2048

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

Copy Wrapped Content

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

https://example.com/invite/team-alpha

<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.

SSH key fingerprint copied from account settings

<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