JL 4: Toolbar Button with icon and text

JupyterLab extensions
1

I am trying to create a button for the toolbar that has both an icon and text.

Just like the download button:
image

Here is the code I am trying. All I get is the upload icon and the mouseover caption with no text to side.

import { JupyterFrontEndPlugin, JupyterFrontEnd } from '@jupyterlab/application';
import { INotebookTracker } from '@jupyterlab/notebook';
import { fileUploadIcon } from '@jupyterlab/ui-components';

....

 commands.addCommand(command, {
        label: "Submit for Grading",
        icon: fileUploadIcon,
        iconClass: "jp-icon3",
        iconLabel: "Submit for Grading",
      caption: 'Send your notebook to be graded',
      execute: (args: any) => {
        var nb = nbpanel?.context.model.toJSON();

        var payload = JSON.stringify({'nb': nb});
        var otherParam = {
          headers: {"Content-Type": "application/json"},
          body: payload,
          method: "POST"
        };
       
})

Thanks!

2

@Sean_Morris following this example: https://github.com/jupyterlab/extension-examples/tree/main/toolbar-button

With this followng snippet for the plugin:

import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin
} from '@jupyterlab/application';

import { downloadIcon } from '@jupyterlab/ui-components';

/**
 * Initialization data for the myextension extension.
 */
const plugin: JupyterFrontEndPlugin<void> = {
  id: 'myextension:plugin',
  description: 'A JupyterLab extension.',
  autoStart: true,
  activate: (app: JupyterFrontEnd) => {
    const { commands } = app;
    commands.addCommand('assignments:submit', {
      label: 'Submit for Grading',
      iconLabel: 'Submit for Grading',
      icon: downloadIcon,
      execute: () => {
        console.log('Hello World!');
      }
    });
  }
};

export default plugin;

And the following for the setting file (schema/plugin.json):

{
  "jupyter.lab.toolbars": {
    "Notebook": [
      {
        "name": "submit-grading",
        "icon": "ui-components:download",
        "label": "Submit for Grading",
        "command": "assignments:submit"
      }
    ]
  },
  "title": "@jupyterlab-examples/toolbar-button",
  "description": "@jupyterlab-examples/toolbar-button settings.",
  "type": "object",
  "properties": {},
  "additionalProperties": false
}

Will display the toolbar item with both the label and the icon:

image

Specifying label in schema/plugin.json seems to be required for both to be displayed. Not sure why, but maybe it’s an issue in JupyterLab. It could also be an issue if we want the label to be properly localized.

1 Like
3

Thanks @jtp – The plugin.json was the problem. Where did you find the resources to figure this out? The toolbar example doesn’t have the icon and label in the plugin.json needed to make something like the Download Button.

Good deal, I am psyched. Thanks

4

There is a bit of information on what can be customized via the settings in the JupyterLab docs: Common Extension Points — JupyterLab 4.0.2 documentation