diff --git a/e2e/signature-actions.spec.ts b/e2e/signature-actions.spec.ts
index e305459..078b0f9 100644
--- a/e2e/signature-actions.spec.ts
+++ b/e2e/signature-actions.spec.ts
@@ -57,3 +57,15 @@ test("zoom a pdf element", async({page})=> {
   await expect(page.locator(".signature-box")).toHaveCount(1)
   expect(after.x).not.toBe(before.y);
 })
+
+test("duplicates a signature element", async ({ page }) => {
+  const original = await page.locator(".signature-box").boundingBox();
+  await page.getByTitle("Duplicate").click();
+  await expect(page.locator(".signature-box")).toHaveCount(2);
+
+  const copy = await page.locator(".signature-box").nth(1).boundingBox();
+  expect(copy.width).toBe(original.width);
+  expect(copy.height).toBe(original.height);
+  expect(copy.x).toBeGreaterThan(original.x);
+  expect(copy.y).toBeGreaterThan(original.y);
+})
diff --git a/examples/basic/App.vue b/examples/basic/App.vue
index 15df9bc..fc8efcd 100644
--- a/examples/basic/App.vue
+++ b/examples/basic/App.vue
@@ -41,7 +41,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           />
         </template>
 
-        <template #actions="{ onDelete }">
+        <template #actions="{ onDelete, onDuplicate }">
+          <DuplicateButton @duplicate="onDuplicate" />
           <DeleteButton @delete="onDelete" />
         </template>
       </PDFElements>
@@ -63,6 +64,7 @@ import AppToolbar from './components/AppToolbar.vue'
 import DocumentsList from './components/DocumentsList.vue'
 import SignatureBox from './components/SignatureBox.vue'
 import DeleteButton from './components/DeleteButton.vue'
+import DuplicateButton from './components/DuplicateButton.vue'
 import ElementsViewer from './components/ElementsViewer.vue'
 
 export default defineComponent({
@@ -73,6 +75,7 @@ export default defineComponent({
     DocumentsList,
     SignatureBox,
     DeleteButton,
+    DuplicateButton,
     ElementsViewer,
   },
   data() {
diff --git a/examples/basic/components/DeleteButton.vue b/examples/basic/components/DeleteButton.vue
index 2130e9e..799f0b9 100644
--- a/examples/basic/components/DeleteButton.vue
+++ b/examples/basic/components/DeleteButton.vue
@@ -18,7 +18,7 @@ export default defineComponent({
 .delete-btn {
   border: none;
   background: transparent;
-  color: #ffffff;
+  color: currentColor;
   padding: 4px;
   border-radius: 4px;
   cursor: pointer;
diff --git a/examples/basic/components/DuplicateButton.vue b/examples/basic/components/DuplicateButton.vue
new file mode 100644
index 0000000..7e7ef60
--- /dev/null
+++ b/examples/basic/components/DuplicateButton.vue
@@ -0,0 +1,33 @@
+<template>
+  <button class="duplicate-btn" type="button" title="Duplicate" @click.stop="$emit('duplicate')">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M16 1H6a2 2 0 0 0-2 2v12h2V3h10V1zm3 4H10a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H10V7h9v14z"/>
+    </svg>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DuplicateButton',
+})
+</script>
+
+<style scoped>
+.duplicate-btn {
+  border: none;
+  background: transparent;
+  color: currentColor;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 120ms ease;
+}
+.duplicate-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+</style>