How to toggle a toolbar button icon?

A ToolbarButton can be instantiated like this:

new ToolbarButton({
      className: 'the-name-of-the-class',
      onClick: ()=>{},
     icon: a-lab-icon-object

Is there a supported way to toggle the icon image?

I’m guessing that the method used in order to toggle the kernel status is supported, so I was able to use this method: jupyterlab/widget.tsx at e4e323992d24f6c5e48d181381e23c547b665b15 · jupyterlab/jupyterlab · GitHub

However, that isn’t using a ToolbarButton.

I know I can toggle the class of a ToolbarButton’s Widget in order to toggle its background image, which gets covered up by the button’s background. However, I’m interested in learning if there is a supported way to toggle the icon in order for the person who is looking at it to be able to see it when it changes.

As an aside, does anyone know the rationale for using React in the Toolbar? It seems like this could have been done with Lumino Widgets.


The ability to set toggle state of toolbar button in JupyterLab 4 (see that PR). But in JLab 3 this is not available.

Regarding the rational for React, I don’t know. But it could surely have been done with Lumino widgets.

1 Like


I will be back porting PR to 3.1 soon (In the next 2 weeks). Will keep you updated on the progress.

I don’t know the history of using React vs Lumino, I mainly worked on the enhancements. Will be happy to work on any recommendations to improve it.


ToolbarButton update was just merged to 3.2.x branch.

1 Like