Skip to main content
Version: 2.0-deprecated

Module: Toolbar

An extension can register a Toolbar Module by defining a getToolbarModule method. This module is commonly used to define:

Toolbar Extension

Example toolbar button using the Dialog Service to show CINE controls.

Example Toolbar Module

The Toolbar Module should return an array of definitions and a defaultContext. There are currently a few different variations of definitions, each one is detailed further down.

export default {
id: 'example-toolbar-module',

* @param {object} params
* @param {ServicesManager} params.servicesManager
* @param {CommandsManager} params.commandsManager
getToolbarModule({ servicesManager, commandsManager }) {
return {
definitions: [
/* Array of definitions */
defaultContext: ['ROUTE:VIEWER'],

Button Definitions

The simplest definition has the following properties:

id: 'StackScroll',
label: 'Stack Scroll',
icon: 'bars',
type: 'setToolActive',
commandName: 'setToolActive',
commandOptions: { toolName: 'StackScroll' },
idUnique string identifier for the definition*
labelUser/display friendly to show in UI*
iconA string name for an icon supported by the consuming application.*
typeUsed to determine the button's component and behavior"setToolActive", "command"
commandName(optional) The command to run when the button is used.Any command registered by a CommandModule
commandOptions(optional) Options to pass the target commandName*
context(optional) Overrides module's defaultContextArray of string context names

Where a button with a type of setToolActive has an "active" styling applied when clicked; removing the active styling from all other buttons.

Nested Toolbar Menus

You can indicate that buttons should be grouped and nested in a submenu by including buttons property in a definition:

id: 'More',
label: 'More',
icon: 'ellipse-circle',
buttons: [
id: 'cstInvert',
label: 'Invert',
icon: 'circle',
type: 'command',
commandName: 'invertViewport',

Toolbar Extension

Example toolbar button demonstrating nested buttons.

Custom Components

The Toolbar Modules supports rendering custom components in place of the application's default. In place of the type, commandName, and commandOptions properties, we instead specify a CustomComponent.

id: 'Custom',
label: 'Custom',
icon: 'custom-icon',
CustomComponent: CustomToolbarComponent,

The CustomComponent components will receive the following props:

activeButtonsstring[]list of active buttons
buttonobjectits own definition object
keystringReact key prop
isActivebooleanIf current button is active
parentContext?The parent component's context?
toolbarClickCallbackfuncCallback method for clicks