Include link target in button

In my application, I have a few Bokeh Buttons each activating a specific state of the website (via CustomJS). Each website state is also associated with an individual URL anchor in the style of url.com/index#state_id. Ideally, I would like to wrap the button in an <a> tag to show a preview of the link in the browser status bar and also to enable a middle click on the button that would open the state in a new tab. Any leads on how to accomplish this? Or would this only be possible with the Div tag as shown in my example?

from bokeh.layouts import layout
from bokeh.models import Button, Div
from bokeh.plotting import show


div = Div(text='<a href="link.html"><button>Html button</button></a>')

# Ideally this button has a similar <a> link property as the Html button
button = Button(label='Bokeh Button')

show(layout([[div], [button]]))

Workaround, you could use CustomJS to launch the url?

from bokeh.plotting import show
from bokeh.models import Button, CustomJS

btn = Button(label = 'google.ca')

cb = CustomJS(code='''
              //got this from: https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window
              window.open('https://www.google.ca', '_blank').focus();
              ''')
btn.js_on_click(cb)

show(btn)

No idea about the preview setup etc. though.

Hi @gmerritt123,

Thanks for your suggestion!
The thing is that the link should be opened in a new window only on a middle click (not a left click), just like regular links. However, there does not seem to be a dedicated “middle click” event or an event that would trigger on both left and middle click.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.