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?
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?
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:
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:
getTokenButton.addClass('my-class-name');
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.