diff --git a/README.md b/README.md
index 8146df9f..cde5e9df 100644
--- a/README.md
+++ b/README.md
@@ -259,6 +259,98 @@ Use `--style-props` to customize styles.
 </Highlight>
 ```
 
+## Copy Button
+
+Use the `CopyButton` component to add copy-to-clipboard functionality to your highlighted code blocks.
+
+The button is positioned at the top-right of the highlight component by default and shows visual feedback when copying.
+
+```svelte
+<script>
+  import { Highlight, CopyButton } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+
+  const code = "const add = (a: number, b: number) => a + b;";
+</script>
+
+<Highlight language={typescript} {code}>
+  <CopyButton code={code} />
+</Highlight>
+```
+
+### Custom Content with Slots
+
+You can provide custom content for the button using the default slot. The slot provides an `isCopied` boolean to help you customize the display:
+
+```svelte
+<CopyButton code={code}>
+  <svelte:fragment let:isCopied>
+    {#if isCopied}
+      <span class="copied-icon">✓</span> Copied!
+    {:else}
+      <span class="copy-icon">📋</span> Copy Code
+    {/if}
+  </svelte:fragment>
+</CopyButton>
+```
+
+### Custom Copy Function
+
+You can provide a custom function to handle copying, which completely replaces the default clipboard API:
+
+```svelte
+<script>
+  function customCopy(text) {
+    // Add your custom logic here
+    console.log('Copying:', text);
+    
+    // Return true for success, false for failure
+    return navigator.clipboard.writeText(text)
+      .then(() => true)
+      .catch(() => false);
+  }
+</script>
+
+<CopyButton 
+  code={code} 
+  copyFn={customCopy}
+  copyText="Custom Copy"
+  copiedText="Done!"
+  copyTimeout={3000}
+/>
+```
+
+### Customization
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `code` | `string` | `''` | The code content to copy |
+| `copyFn` | `(text: string) => Promise<boolean> \| boolean` | `undefined` | Custom function to handle copying |
+| `copyText` | `string` | `'Copy'` | Text to display when not copied (fallback if no slot content) |
+| `copiedText` | `string` | `'Copied!'` | Text to display when copied (fallback if no slot content) |
+| `copyTimeout` | `number` | `2000` | Time in milliseconds before resetting copied state |
+
+The component also supports all standard HTML button attributes like `style`, `class`, etc.
+
+### Event Handling
+
+The component dispatches a `copy` event when the copy operation completes:
+
+```svelte
+<script>
+  function handleCopy(event) {
+    const { success, text } = event.detail;
+    if (success) {
+      showToast('Code copied successfully!');
+    } else {
+      showToast('Failed to copy code');
+    }
+  }
+</script>
+
+<CopyButton code={code} on:copy={handleCopy} />
+```
+
 ## Language Targeting
 
 All `Highlight` components apply a `data-language` attribute on the codeblock containing the language name.
@@ -438,8 +530,8 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
      * The highlighted HTML as a string.
      * @example "<span>...</span>"
      */
-    console.log(e.detail.highlighted);
-  }}
+     console.log(e.detail.highlighted);
+   }}
 />
 ```
 
@@ -480,8 +572,8 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
      * The highlighted HTML as a string.
      * @example "<span>...</span>"
      */
-    console.log(e.detail.highlighted);
-  }}
+     console.log(e.detail.highlighted);
+   }}
 />
 ```
 
@@ -508,14 +600,14 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
      * The highlighted HTML as a string.
      * @example "<span>...</span>"
      */
-    console.log(e.detail.highlighted);
-
-    /**
-     * The inferred language name
-     * @example "css"
-     */
-    console.log(e.detail.language);
-  }}
+     console.log(e.detail.highlighted);
+
+     /**
+      * The inferred language name
+      * @example "css"
+      */
+     console.log(e.detail.language);
+   }}
 />
 ```
 
diff --git a/src/CopyButton.svelte b/src/CopyButton.svelte
new file mode 100644
index 00000000..6a91a62f
--- /dev/null
+++ b/src/CopyButton.svelte
@@ -0,0 +1,120 @@
+<script>
+  /** @type {string} */
+  export let code = "";
+
+  /** @type {((text: string) => Promise<boolean> | boolean) | undefined} */
+  export let copyFn = undefined;
+
+  /** @type {string} */
+  export let copyText = "Copy";
+
+  /** @type {string} */
+  export let copiedText = "Copied!";
+
+  /** @type {number} */
+  export let copyTimeout = 2_000;
+
+  import { createEventDispatcher, onMount } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /** @type {boolean} */
+  let isCopied = false;
+
+  /** @type {number | undefined} */
+  let copyTimeoutId = undefined;
+
+  async function handleCopy() {
+    if (isCopied) return;
+
+    let success = false;
+
+    try {
+      if (copyFn) {
+        const result = copyFn(code);
+        success = result instanceof Promise ? await result : result;
+      } else {
+        await navigator.clipboard.writeText(code);
+        success = true;
+      }
+    } catch (error) {
+      console.error("Failed to copy text:", error);
+      success = false;
+    }
+
+    if (success) {
+      isCopied = true;
+      dispatch("copy", { success: true, text: code });
+      copyTimeoutId = window.setTimeout(() => {
+        isCopied = false;
+      }, copyTimeout);
+    } else {
+      dispatch("copy", { success: false, text: code });
+    }
+  }
+
+  onMount(() => {
+    return () => {
+      if (copyTimeoutId) {
+        clearTimeout(copyTimeoutId);
+      }
+    };
+  });
+</script>
+
+<button
+  type="button"
+  class:copied={isCopied}
+  disabled={isCopied}
+  on:click={handleCopy}
+  {...$$restProps}
+>
+  <slot {isCopied}>{isCopied ? copiedText : copyText}</slot>
+</button>
+
+<style>
+  button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #6b7280;
+    background-color: #f9fafb;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    z-index: 10;
+    min-width: 4rem;
+    text-align: center;
+  }
+
+  button:hover:not(:disabled) {
+    background-color: #f3f4f6;
+    border-color: #9ca3af;
+    color: #374151;
+  }
+
+  button:active:not(:disabled) {
+    background-color: #e5e7eb;
+    transform: translateY(1px);
+  }
+
+  button.copied {
+    background-color: #10b981;
+    border-color: #059669;
+    color: white;
+    cursor: default;
+  }
+
+  button:disabled {
+    cursor: default;
+  }
+
+  button:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+</style>
diff --git a/src/CopyButton.svelte.d.ts b/src/CopyButton.svelte.d.ts
new file mode 100644
index 00000000..aebd0914
--- /dev/null
+++ b/src/CopyButton.svelte.d.ts
@@ -0,0 +1,62 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+export type CopyButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  /**
+   * The code content to copy to clipboard.
+   */
+  code?: string;
+
+  /**
+   * Custom function to handle copying. If provided, this completely replaces
+   * the default clipboard API. Should return true for success, false for failure.
+   */
+  copyFn?: ((text: string) => Promise<boolean> | boolean) | undefined;
+
+  /**
+   * Text to display when the button is in the default state.
+   * @default "Copy"
+   */
+  copyText?: string;
+
+  /**
+   * Text to display when the button is in the copied state.
+   * @default "Copied!"
+   */
+  copiedText?: string;
+
+  /**
+   * Time in milliseconds before resetting the copied state.
+   * @default 2000
+   */
+  copyTimeout?: number;
+};
+
+export type CopyButtonEvents = {
+  copy: CustomEvent<{
+    /**
+     * Whether the copy operation was successful.
+     */
+    success: boolean;
+
+    /**
+     * The text that was copied.
+     */
+    text: string;
+  }>;
+};
+
+export type CopyButtonSlots = {
+  default: {
+    /**
+     * Whether the button is currently in the copied state.
+     */
+    isCopied: boolean;
+  };
+};
+
+export default class CopyButton extends SvelteComponentTyped<
+  CopyButtonProps,
+  CopyButtonEvents,
+  CopyButtonSlots
+> {}
diff --git a/src/LangTag.svelte b/src/LangTag.svelte
index f152bd1b..47028044 100644
--- a/src/LangTag.svelte
+++ b/src/LangTag.svelte
@@ -18,7 +18,7 @@
   ></pre>
 
 <style>
-  .langtag {
+  pre {
     position: relative;
   }
 
diff --git a/src/index.d.ts b/src/index.d.ts
index 2889b540..73fbaf46 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -2,4 +2,5 @@ export { default as Highlight, default as default } from "./Highlight.svelte";
 export { default as HighlightAuto } from "./HighlightAuto.svelte";
 export { default as HighlightSvelte } from "./HighlightSvelte.svelte";
 export { default as LineNumbers } from "./LineNumbers.svelte";
+export { default as CopyButton } from "./CopyButton.svelte";
 export type { LanguageType } from "./languages";
diff --git a/src/index.js b/src/index.js
index 9b4830f3..6dd2ea8a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,3 +2,4 @@ export { default as default, default as Highlight } from "./Highlight.svelte";
 export { default as HighlightAuto } from "./HighlightAuto.svelte";
 export { default as HighlightSvelte } from "./HighlightSvelte.svelte";
 export { default as LineNumbers } from "./LineNumbers.svelte";
+export { default as CopyButton } from "./CopyButton.svelte";
diff --git a/tests/e2e/CopyButton.test.svelte b/tests/e2e/CopyButton.test.svelte
new file mode 100644
index 00000000..eab1e078
--- /dev/null
+++ b/tests/e2e/CopyButton.test.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { Highlight, CopyButton } from "../../src/index.js";
+  import javascript from "highlight.js/lib/languages/javascript";
+
+  let copyCount = 0;
+  let lastCopiedText = "";
+
+  function handleCopy(event: CustomEvent<{ success: boolean; text: string }>) {
+    copyCount++;
+    lastCopiedText = event.detail.text;
+    console.log("Copy event:", event.detail);
+  }
+
+  const jsCode = `function greet(name) {
+  console.log(\`Hello, \${name}!\`);
+  return \`Hello, \${name}!\`;
+}
+
+greet('World');`;
+</script>
+
+<div class="copy-button-test">
+  <h3>CopyButton Test</h3>
+
+  <div class="test-section">
+    <h4>Basic CopyButton (Default Content)</h4>
+    <Highlight
+      language={{ name: "javascript", register: javascript }}
+      code={jsCode}
+    >
+      <CopyButton code={jsCode} on:copy={handleCopy} />
+    </Highlight>
+  </div>
+
+  <div class="test-section">
+    <h4>CopyButton with Custom Text Props</h4>
+    <Highlight
+      language={{ name: "javascript", register: javascript }}
+      code={jsCode}
+    >
+      <CopyButton
+        code={jsCode}
+        copyText="Copy JS"
+        copiedText="Copied JS!"
+        on:copy={handleCopy}
+      />
+    </Highlight>
+  </div>
+
+  <div class="test-section">
+    <h4>CopyButton with Custom Slot Content</h4>
+    <Highlight
+      language={{ name: "javascript", register: javascript }}
+      code={jsCode}
+    >
+      <CopyButton code={jsCode} on:copy={handleCopy}>
+        <svelte:fragment let:isCopied>
+          {#if isCopied}
+            <span class="copied-icon">✓</span> Copied!
+          {:else}
+            <span class="copy-icon">📋</span> Copy Code
+          {/if}
+        </svelte:fragment>
+      </CopyButton>
+    </Highlight>
+  </div>
+
+  <div class="test-section">
+    <h4>CopyButton with Custom Copy Function</h4>
+    <Highlight
+      language={{ name: "javascript", register: javascript }}
+      code={jsCode}
+    >
+      <CopyButton
+        code={jsCode}
+        copyFn={(text) => {
+          console.log("Custom copy function called with:", text);
+          return Promise.resolve(true);
+        }}
+        copyText="Custom Copy"
+        copiedText="Custom Done!"
+        on:copy={handleCopy}
+      />
+    </Highlight>
+  </div>
+
+  <div class="test-section">
+    <h4>CopyButton with Custom Styling</h4>
+    <Highlight
+      language={{ name: "javascript", register: javascript }}
+      code={jsCode}
+    >
+      <CopyButton
+        code={jsCode}
+        copyText="Styled Copy"
+        style="top: 1rem; right: 1rem; background: #ef4444; color: white; border-color: #dc2626;"
+        on:copy={handleCopy}
+      />
+    </Highlight>
+  </div>
+
+  <div class="test-section">
+    <h4>CopyButton with Advanced Slot Content</h4>
+    <Highlight
+      language={{ name: "javascript", register: javascript }}
+      code={jsCode}
+    >
+      <CopyButton code={jsCode} on:copy={handleCopy}>
+        <svelte:fragment let:isCopied>
+          <div class="custom-button-content">
+            {#if isCopied}
+              <span class="success">✓ Successfully copied!</span>
+            {:else}
+              <span class="action">📋 Click to copy JavaScript code</span>
+            {/if}
+          </div>
+        </svelte:fragment>
+      </CopyButton>
+    </Highlight>
+  </div>
+
+  <div class="test-info">
+    <p>Copy events: {copyCount}</p>
+    <p>Last copied: {lastCopiedText || "None"}</p>
+  </div>
+</div>
+
+<style>
+  .copy-button-test {
+    padding: 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .test-section {
+    margin-bottom: 2rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .test-section h4 {
+    margin: 0;
+    padding: 1rem;
+    background: #f8fafc;
+    border-bottom: 1px solid #e5e7eb;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .test-info {
+    margin-top: 2rem;
+    padding: 1rem;
+    background: #f0f9ff;
+    border: 1px solid #0ea5e9;
+    border-radius: 0.5rem;
+  }
+
+  .test-info p {
+    margin: 0.5rem 0;
+    font-family: monospace;
+  }
+
+  .copy-icon,
+  .copied-icon {
+    margin-right: 0.5rem;
+  }
+
+  .custom-button-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 8rem;
+  }
+
+  .success {
+    color: #10b981;
+    font-weight: 600;
+  }
+
+  .action {
+    color: #6b7280;
+  }
+</style>
diff --git a/tests/e2e/e2e.test.ts b/tests/e2e/e2e.test.ts
index 6ba7ddd0..67badf5a 100644
--- a/tests/e2e/e2e.test.ts
+++ b/tests/e2e/e2e.test.ts
@@ -6,6 +6,7 @@ import LineNumbersHideBorder from "./LineNumbers.hideBorder.test.svelte";
 import LineNumbers from "./LineNumbers.test.svelte";
 import LineNumbersWrapLines from "./LineNumbers.wrapLines.test.svelte";
 import SvelteHighlight from "./SvelteHighlight.test.svelte";
+import CopyButton from "./CopyButton.test.svelte";
 
 test.use({ viewport: { width: 1200, height: 600 } });
 
@@ -68,6 +69,23 @@ test("LineNumbers - custom starting number", async ({ mount, page }) => {
   await expect(page.getByText("100")).toBeVisible();
 });
 
+test("CopyButton - basic functionality", async ({ mount, page }) => {
+  await mount(CopyButton);
+  
+  // Check that CopyButton is visible
+  await expect(page.getByText("Copy")).toBeVisible();
+  
+  // Check that all test sections are present
+  await expect(page.getByText("Basic CopyButton")).toBeVisible();
+  await expect(page.getByText("Custom Text CopyButton")).toBeVisible();
+  await expect(page.getByText("Custom Copy Function")).toBeVisible();
+  await expect(page.getByText("CopyButton with Custom Styling")).toBeVisible();
+  
+  // Check that copy buttons are positioned correctly
+  const copyButtons = page.locator("button");
+  await expect(copyButtons).toHaveCount(4);
+});
+
 test("Language tag styling", async ({ mount, page }) => {
   await mount(Highlight, {
     props: {
diff --git a/www/components/CopyButton/Basic.svelte b/www/components/CopyButton/Basic.svelte
new file mode 100644
index 00000000..2660091a
--- /dev/null
+++ b/www/components/CopyButton/Basic.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Highlight, CopyButton } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+
+  const code = `function greet(name) {
+  return \`Hello, \${name}!\`;
+}
+
+const message = greet("World");
+console.log(message);`;
+</script>
+
+<div class="highlight-wrapper">
+  <Highlight language={typescript} {code} class="github">
+    <CopyButton {code} />
+  </Highlight>
+</div>
+
+<style>
+  .highlight-wrapper {
+    position: relative;
+  }
+
+  :global(.github) {
+    margin: 0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+</style>
diff --git a/www/components/CopyButton/CustomFunction.svelte b/www/components/CopyButton/CustomFunction.svelte
new file mode 100644
index 00000000..812b0ec0
--- /dev/null
+++ b/www/components/CopyButton/CustomFunction.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { Highlight, CopyButton } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+
+  const code = `class Calculator {
+  add(a, b) {
+    return a + b;
+  }
+  
+  subtract(a, b) {
+    return a - b;
+  }
+  
+  multiply(a, b) {
+    return a * b;
+  }
+  
+  divide(a, b) {
+    if (b === 0) throw new Error("Division by zero");
+    return a / b;
+  }
+}
+
+const calc = new Calculator();
+console.log(calc.add(5, 3));`;
+
+  function customCopy(text: string) {
+    // Add custom logic here - could be analytics, logging, etc.
+    console.log("Custom copy function called with:", text);
+
+    // You could also modify the text before copying
+    const modifiedText = "// Copied from svelte-highlight examples\n" + text;
+
+    // Return true for success, false for failure
+    return navigator.clipboard
+      .writeText(modifiedText)
+      .then(() => true)
+      .catch(() => false);
+  }
+</script>
+
+<div class="highlight-wrapper">
+  <Highlight language={typescript} {code} class="github">
+    <CopyButton
+      {code}
+      copyFn={customCopy}
+      copyText="Custom Copy"
+      copiedText="Done!"
+      copyTimeout={3000}
+    />
+  </Highlight>
+</div>
+
+<style>
+  .highlight-wrapper {
+    position: relative;
+  }
+
+  :global(.github) {
+    margin: 0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+</style>
diff --git a/www/components/CopyButton/Slot.svelte b/www/components/CopyButton/Slot.svelte
new file mode 100644
index 00000000..a8de631f
--- /dev/null
+++ b/www/components/CopyButton/Slot.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { Highlight, CopyButton } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+
+  const code = `interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+function createUser(name, email) {
+  return {
+    id: Date.now(),
+    name,
+    email
+  };
+}
+
+const user = createUser("John Doe", "john@example.com");`;
+</script>
+
+<div class="highlight-wrapper">
+  <Highlight language={typescript} {code} class="github">
+    <CopyButton {code}>
+      <svelte:fragment let:isCopied>
+        {#if isCopied}
+          <span class="copied-icon">✓</span> Copied!
+        {:else}
+          <span class="copy-icon">📋</span> Copy Code
+        {/if}
+      </svelte:fragment>
+    </CopyButton>
+  </Highlight>
+</div>
+
+<style>
+  .highlight-wrapper {
+    position: relative;
+  }
+
+  :global(.github) {
+    margin: 0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .copy-icon,
+  .copied-icon {
+    margin-right: 0.5rem;
+  }
+</style>
diff --git a/www/components/globals/Index.svelte b/www/components/globals/Index.svelte
index c9fe4060..cdc4d0d7 100644
--- a/www/components/globals/Index.svelte
+++ b/www/components/globals/Index.svelte
@@ -20,6 +20,9 @@
   import StartingLineNumber from "@components/LineNumbers/StartingLineNumber.svelte";
   import HighlightedLines from "@components/LineNumbers/HighlightedLines.svelte";
   import HighlightedLinesCustomColor from "@components/LineNumbers/HighlightedLinesCustomColor.svelte";
+  import CopyButtonBasic from "@components/CopyButton/Basic.svelte";
+  import CopyButtonSlot from "@components/CopyButton/Slot.svelte";
+  //import CopyButtonCustomFunction from "@components/CopyButton/CustomFunction.svelte";
   import css from "svelte-highlight/languages/css";
 
   const svelteHeadCdn = `<link
@@ -232,6 +235,44 @@
   </Column>
 </Row>
 
+<Row class="mb-9">
+  <Column xlg={12}>
+    <h3>Copy Button</h3>
+  </Column>
+  <Column xlg={6} lg={6} md={12}>
+    <p class="mb-5">
+      Use the <code class="code">CopyButton</code> component to add copy-to-clipboard
+      functionality to your highlighted code blocks.
+    </p>
+    <p class="mb-5">
+      The button is positioned at the top-right of the highlight component by
+      default and shows visual feedback when copying.
+    </p>
+    <p class="mb-5">
+      You can provide custom content using the default slot, which receives an <code
+        class="code">isCopied</code
+      > boolean to help customize the display.
+    </p>
+  </Column>
+  <Column xlg={10} lg={10} md={12}>
+    <CopyButtonBasic />
+  </Column>
+  <Column xlg={6} lg={6} md={12}>
+    <p class="mb-5">Customize the button content using the default slot:</p>
+  </Column>
+  <Column xlg={10} lg={10} md={12}>
+    <CopyButtonSlot />
+  </Column>
+  <Column xlg={6} lg={6} md={12}>
+    <p class="mb-5">
+      Provide a custom copy function to replace the default clipboard API:
+    </p>
+  </Column>
+  <Column xlg={10} lg={10} md={12}>
+    <!-- <CopyButtonCustomFunction /> -->
+  </Column>
+</Row>
+
 <Row class="mb-9">
   <Column xlg={12}>
     <h3>Language Targeting</h3>