toolbar.actions

Your buttons. Bar: after Print/Download. Ribbon: before them. Give every action an icon. On a compact bar, labels are hidden on all but primary actions, and on a narrow or tiny bar on every action: the button shows only its icon (the label stays its tooltip and accessible name). A name such as 'done' also picks up your toolbar.icons replacement for it. Actions are set when the viewer is built and cannot be disabled or relabeled later. A rejected promise from onClick is logged and reported through the error event.

ToolbarAction[]

Example

actionsTypeScript

// Only a "Done" button that uploads to S3
toolbar: {
  print: false,
  download: false,
  actions: [{
    id: 'done',
    label: 'Done',
    icon: 'done',
    variant: 'primary',
    onClick: async () => {
      const exporter = viewer.createExporter();
      const res = await exporter.uploadTo(presignedUrl, { method: 'PUT' });
      // An HTTP error does not reject; a throw here reaches the `error` event.
      if (!res.ok) throw new Error('Upload failed: ' + res.status);
    }
  }]
}

Options 5

idstringRequired

Your own name for the action; the SDK uses it only to name the action in an error report.

labelstringRequired

Button text.

iconstring

An IconName, or raw SVG markup starting with <svg. An action icon that is neither a name nor markup starting with <svg draws nothing.

actions.iconTypeScript

// Custom SVG icon for an action button
toolbar: {
  actions: [{
    id: 'share',
    label: 'Share',
    icon: '<svg viewBox="0 0 20 20">...</svg>',
    onClick: () => { /* share logic */ }
  }]
}

variant'default' | 'primary'

'primary' = accent-colored.

'default'A regular toolbar button.
'primary'Accent-colored. On a compact bar it is the only action that keeps its label.

onClick() => void | Promise<void>Required

Called when the button is pressed. A rejected promise is logged and reported through the error event.

toolbar.actions

Example

Options 5

More in Toolbar