# How to modifiy the event of delete button on annotation popup ? and How can I Add the new button on the annotation popup?

**URL:** <https://pdfjs.community/t/how-to-modifiy-the-event-of-delete-button-on-annotation-popup-and-how-can-i-add-the-new-button-on-the-annotation-popup/3080>\
**Category:** Technical Support\
**Created:** [January 16, 2024, 2:10pm UTC](https://pdfjs.community/t/how-to-modifiy-the-event-of-delete-button-on-annotation-popup-and-how-can-i-add-the-new-button-on-the-annotation-popup/3080 "2024-01-16T14:10:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![shahid.shaikh](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@shahid.shaikh](https://pdfjs.community/u/shahid.shaikh)\
**Post date:** [January 16, 2024, 2:10pm UTC](https://pdfjs.community/t/how-to-modifiy-the-event-of-delete-button-on-annotation-popup-and-how-can-i-add-the-new-button-on-the-annotation-popup/3080/1 "2024-01-16T14:10:36Z")

</div>

**Which product are you using?**  
PDF.js Express Plus

**PDF.js Express Version**  
8.7.4

**Detailed description of issue**  
How to modify the event on click on the delete button of the annotation popup and how to add another button on annotation popup ?

![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/4/44ddec15548e5ee922a31938b42051fbb209d02e.png)  
Want to open conformation modal on clicking on the delete button do not want delete the annotation and want to add the another button on annotation popup ?

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [January 16, 2024, 9:45pm UTC](https://pdfjs.community/t/how-to-modifiy-the-event-of-delete-button-on-annotation-popup-and-how-can-i-add-the-new-button-on-the-annotation-popup/3080/2 "2024-01-16T21:45:10Z")

</div>

Hello Shahid,

You can add a button to the annotation popup like so:

```javascript
const customBtn = {
  type: 'actionButton',
  label: 'some-label',
  dataElement: 'someElement',
  onClick: () => console.log('clicked'),
};
instance.UI.annotationPopup.add(customBtn);

```

I think to have a confirmation modal appear, you can create a new delete button that will open a custom modal. You can use the addCustomModal API here: [PDFJS Express WebViewer Namespace: UI](https://pdfjs.express/api/UI.html#.addCustomModal)

You can delete the selected annotation with deleteAnnotation here: [PDFJS Express WebViewer Class: AnnotationManager](https://pdfjs.express/api/Core.AnnotationManager.html#deleteAnnotation__anchor)

Best Regards,  
Darian

---

<div class="post-metadata">

**Author:** ![neeraj.khosla](https://avatars.discourse-cdn.com/v4/letter/n/f08c70/32.png) [@neeraj.khosla](https://pdfjs.community/u/neeraj.khosla)\
**Post date:** [January 18, 2024, 7:43am UTC](https://pdfjs.community/t/how-to-modifiy-the-event-of-delete-button-on-annotation-popup-and-how-can-i-add-the-new-button-on-the-annotation-popup/3080/3 "2024-01-18T07:43:55Z")

</div>

I am assuming by label : ‘some-label’ will add text. How I can add a custom icon instead of label ?

---

<div class="post-metadata">

**Author:** ![darian.chen](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@darian.chen](https://pdfjs.community/u/darian.chen)\
**Post date:** [January 18, 2024, 2:26pm UTC](https://pdfjs.community/t/how-to-modifiy-the-event-of-delete-button-on-annotation-popup-and-how-can-i-add-the-new-button-on-the-annotation-popup/3080/4 "2024-01-18T14:26:27Z")

</div>

Hello Neeraj,

You can use the img property to add a custom icon.  
Please see this guide here: [PDF.js Express Viewer Customize Toolbar | Documentation](https://pdfjs.express/documentation/ui-customization/customizing-header.8#actionbutton)

Best Regards,  
Darian