maxhill.se - m-copy-button

<m-copy-button> 2 SLOTS 3 PROPS 2 EVENTS

overview

examples

properties

methods

events

slots

css parts

A button component that copies text to the clipboard with visual feedback.

Basic Usage

  Copy Text

Code <m-copy-button value="Hello World">
  Copy Text
</m-copy-button> 

Custom Feedback

  Copy Install Command

Code <m-copy-button value="npm install @maxhill/components" feedback="Command copied!">
  Copy Install Command
</m-copy-button> 

Without Icon

  Copy

Code <m-copy-button value="code snippet example" show-icon="false">
  Copy
</m-copy-button> 

Custom Icon

  📋
  Copy with Custom Icon

Code <m-copy-button value="custom icon text">
  <span slot="icon">📋</span>
  Copy with Custom Icon
</m-copy-button> 

Event Listening

    Copy Text
  
    Click the button to see events...
  
Code <div class="stack" data-gap="2">
  <m-copy-button id="event-copy" value="Event example text">
    Copy Text
  </m-copy-button>
  <div id="copy-event-output" class="box" style="padding: var(--size-2); background: var(--color-surface-raised);">
    Click the button to see events...
  </div>
</div>


<script>
const eventCopy = document.getElementById('event-copy');
const copyEventOutput = document.getElementById('copy-event-output');

eventCopy.addEventListener('copy-success', (e) => {
  copyEventOutput.textContent = `✓ Copied: "${e.detail.value}"`;
});

eventCopy.addEventListener('copy-error', (e) => {
  copyEventOutput.textContent = `✗ Error: ${e.detail.error.message}`;
});

</script> 

Copying Code Snippets

      
    
    const greeting = 'Hello, World!';
console.log(greeting);
  
Code <div class="stack" data-gap="2">
  <pre class="box" style="position: relative; padding: var(--size-3); background: var(--color-surface-raised);">
    <m-copy-button 
      value="const greeting = 'Hello, World!';\nconsole.log(greeting);" 
      style="position: absolute; top: var(--size-2); right: var(--size-2);"
      show-icon="true">
    </m-copy-button>
    <code>const greeting = 'Hello, World!';
console.log(greeting);</code>
  </pre>
</div> 

NAMETYPEDEFAULT

value string "": The text to copy to clipboard (required)
showIcon boolean true: Show/hide the copy icon (default: true)
feedback string "Copied!": Custom feedback message shown on successful copy (default: "Copied!")

NAMERETURNS

render void
attachEventListeners void
define void

NAMEDETAIL TYPE

copy-success CustomEvent: Fired when text is successfully copied (detail: { value: string })
copy-error CustomEvent: Fired when copy fails (detail: { error: Error })

NAME

(default): Default slot for button label/content
icon: Optional slot for custom icon (overrides default copy icon)