Toolbar buttons should be easier to resize
Author: frankierCreated Sep 7, 2026Updated Sep 8, 2026
LabelsTRIAGE
Problem description
Sometimes the toolbar buttons are too small. Ideally it would be possible to customize their size/color.
Feature description
The toolbar buttons allow customization through CSS variable as with some other things like font.
Potential alternatives
Currently the only way I've managed to workaround this is via custom JS (AI assisted):
resize = CustomJS(
name="toolbar-button-resizer",
args={"toolbar": plot.toolbar},
code="""
const apply_size = (attempt = 0) => {
const toolbar_view = Bokeh.index.find_one(toolbar)
if (toolbar_view == null) {
if (attempt == 0)
requestAnimationFrame(() => apply_size(1))
return
}
if (toolbar_view._ctap_buttons_sized)
return
toolbar_view._ctap_buttons_sized = true
for (const button_view of toolbar_view.tool_button_views) {
const style = button_view.el.style
style.setProperty("--button-width", "40px", "important")
style.setProperty("--button-height", "40px", "important")
style.setProperty("width", "40px", "important")
style.setProperty("height", "40px", "important")
}
}
apply_size()
""",
)
# This fires once as each initial or rebuilt plot completes layout.
# The callback guard prevents later responsive layouts from reapplying it.
plot.js_on_change("inner_width", resize)It doesn't like it's possible to target things in other ways with custom CSS due to the shadow DOM.
Additional information
Here's a couple of other people asking for this in the past:
https://stackoverflow.com/questions/76424444/how-can-i-increase-the-height-of-the-bokeh-toolbar https://discourse.bokeh.org/t/how-to-change-the-way-the-toolbar-appear/12413/2
Source: bokeh/bokeh