Customizing annotation variant buttons in the toolbar

Annotation tool variants are alternate configurations that apply different initial properties when creating annotations. Nutrient Web SDK includes variant buttons among its default set of tools. These buttons switch the interaction mode to one of the standard annotation modes, and they also set an annotation preset that applies those initial properties. For example:

• ink-highlighter — This variant button sets the interaction mode to NutrientViewer.InteractionMode.INK. This increases thickness, sets the blend mode to multiply, and changes the color to yellow, making the annotation suitable for manually highlighting document content while drawing.
• arrow — This sets the NutrientViewer.InteractionMode.SHAPE_LINE interaction mode and arrow annotation preset, which defaults to drawing lines with an arrow.

You can modify annotation type variants by setting a different custom preset. In this example, you’ll modify the preset for the arrow variant so that it uses a thicker stroke and a different title:

instance.setAnnotationPresets((presets) => {
  presets.thick = {
    ...presets.arrow,
    strokeWidth: 15
  };
  return presets;
});
instance.setToolbarItems((items) => {
  return items.map((i) => {
    if (i.type === "arrow") {
      return {
        ...i,
        preset: "thick",
        title: "My custom arrow"
      };
    }
    return i;
  });
});

If you aren’t using the default toolbar and instead build your own UI with a custom toolbar or UI slots, you still need the same interaction mode and preset pairing. Refer to the replicate built-in annotation tool variants in a custom UI guide for more information.