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

JupyterLab extensions
,
1

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?

sc_20230903_224521

2

Did you try passing label in the in ToolbarButton options?

3

Thanks to reply.

No.
That was crossed out, so…

ToolbarButton has no label.

4

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
5

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 "
    });

sc_20230908_233719

I think of a workaround…

6

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:

getTokenButton.addClass('my-class-name');
7

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.