dile-copy-text

Web Component that provides a clickable link to copy text to the clipboard with visual feedback.

Installation

npm i @dile/ui

Usage

Import the component

import '@dile/ui/components/copy-text/copy-text.js';

Use the component

<dile-copy-text content="Text to copy">
  Click to copy
</dile-copy-text>

Slots

This component has one slot.

• main slot (unnamed slot): for the clickable text content.

Properties

• content: Text to copy to clipboard, string (required).
• feedbackText: Text shown in the feedback message, string. Default: 'Copied!'.
• copiedDuration: Duration of the feedback message in milliseconds, number. Default: 1000.
• hideIcon: Hide the icon in the feedback message even if one is defined, boolean. Default: false.

Events

• dile-text-copied: Custom event dispatched when text is successfully copied. Contains the copied text in event.detail.text.

element.addEventListener('dile-text-copied', (e) => {
  console.log('Copied:', e.detail.text);
});

CSS Custom Properties

You can customize it using CSS Custom Properties.

dile-copy-text demos

Basic usage

<script type="module">
  import '@dile/ui/components/copy-text/copy-text.js';
</script>
<dile-copy-text content="Hello, World!">
  Click to copy
</dile-copy-text>

Copy email address

<style>
  dile-copy-text {
    --dile-copy-text-color: #0066cc;
    --dile-copy-text-hover-color: #004499;
  }
</style>
<dile-copy-text content="contact@example.com">
  <dile-button>Copy contact@example.com</dile-button>
</dile-copy-text>

With custom feedback text

<dile-copy-text content="Custom text" feedbackText="✅ Copied to clipboard!">
  Copy this
</dile-copy-text>

Without icon feedback

<dile-copy-text content="No icon feedback" hideIcon>
  Copy without icon
</dile-copy-text>

Styled variant

<style>
  .styled-copy {
    --dile-copy-text-color: #28a745;
    --dile-copy-text-hover-color: #1e7e34;
    --dile-copy-text-hover-text-decoration: none;
    --dile-copy-text-transition-duration: 0.15s;
    font-weight: 500;
  }
</style>
<dile-copy-text content="Copy this styled text" class="styled-copy">
  🎯 Copy styled
</dile-copy-text>