I want to insert a label that says "Login" in the toolbar

I am developing jupyterlab-box-drive.

This extension requires the user to always log in first, but the button is small, obscure, and confusing.

I would like to insert a label that says “Login” or make the button stand out. How can I do that?


Did you try passing label in the in ToolbarButton options?

Thanks to reply.

That was crossed out, so…

ToolbarButton has no label.

This is incorrect. The label does exist as option to be passed to the constructor (props: ToolbarButtonComponent.IProps). In the link the interface is appears as crossed out because the interface was moved to another module - this is just a limitation of how the API reference is rendered online (see that tooltip, icon and onClick that you use are also crossed out). You should pass it here:

1 Like

Thank you @krassowski
I was able to display the label.
However, the width is narrow and the icon and label have been cut off.

      tooltip: trans.__('Log In - Box'),
      label: " Log In "


I think of a workaround…

Did you try setting width with CSS styles? From a quick look, this is what the “+” button in main file browser does:

.jp-FileBrowser-toolbar .jp-ToolbarButtonComponent[data-command='launcher:create'] {
  width: 72px;
  background: var(--jp-brand-color1);

your selector would probably look differently as you seem to be using plain ToolbarButton rather than CommandToolbarButton, but you can also add a custom class name or id, like:


Thanks @krassowski for your help

I was able to widen the width.

By the way, if I changed the order of the lines a little, the effect disappeared.

it is a sensitive.