---
title: "Customize annotation tool in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/annotation-toolbar/customize-existing-tools/"
md_url: "https://www.nutrient.io/guides/web/user-interface/annotation-toolbar/customize-existing-tools.md"
last_updated: "2026-05-30T02:20:01.425Z"
description: "Customize annotation toolbar items in your JavaScript PDF viewer with Nutrient Web SDK. Modify title, className, disabled state, and onPress handlers for built-in tools."
---

# Customizing an existing annotation tool in our viewer toolbar

It’s possible to customize the following properties of built-in items:

- `title`

- `className`

- `disabled`

- `onPress`

In the example below, we add a custom `onPress` handler to the first item of the ink annotation toolbar:

```js

NutrientViewer.load({
  //...otherOptions
  annotationToolbarItems: (
    annotation,
    { defaultAnnotationToolbarItems }
  ) => {
    if (annotation instanceof NutrientViewer.Annotations.InkAnnotation) {
      defaultAnnotationToolbarItems[0].onPress = () =>
        alert("Custom onPress handler!");

      return defaultAnnotationToolbarItems;
    }

    return defaultAnnotationToolbarItems;
  }
});

```

See the [API reference](https://www.nutrient.io/api/web/) to learn more about each individual property.

When you set `onPress`, it’s added to the parent of the built-in annotation toolbar item.
---

## Related pages

- [Create a new annotation tool in our viewer toolbar](/guides/web/user-interface/annotation-toolbar/create-a-new-tool.md)
- [Creating a custom annotation toolbar for mobile devices](/guides/web/user-interface/annotation-toolbar/mobile-responsiveness.md)
- [Rearranging annotation tools in our viewer toolbar](/guides/web/user-interface/annotation-toolbar/rearrange.md)
- [Removing an annotation tool from our viewer toolbar](/guides/web/user-interface/annotation-toolbar/remove-a-tool.md)