HTML for actionbuttons

Product: WebViewer

Product Version: 8.0

Please give a brief summary of your issue:
Can I use HTML to make action buttons?

Please describe your issue and provide steps to reproduce it:
As per the example, I am using this code:

    instance.UI.setHeaderItems(header => {
      header.push({
        type: 'actionButton',
        img: '...',

I’d like to have a button that says “Save” and another one that says “Save and Next”. Do I have to use SVG or remote fetch? I just want text.

Please provide a link to a minimal sample where the issue is reproducible:

Hello Scott,

Thank you for contacting WebViewer Support.

One way that I know of is to add the button first like so:

  instance.UI.setHeaderItems(header => {
    header.push({
      type: 'actionButton',
      img: '',
      dataElement: 'customButton',

      onClick: () => {
          .....
      }
    });
  });

Then grab the element by tag using data-element=“customButton”.

Please let me know how this works for you, and if you have any further questions.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com