Button#

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).

import panel as pn
pn.extension()

The Button widget allows triggering events when the button is clicked. In addition to a value parameter, which will toggle from False to True while the click event is being processed an additional clicks parameter that can be watched to subscribe to click events.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the layout and styling how-to guides.




Core#


    

  • clicks (int): Number of clicks (can be listened to)
    • 

  • value (boolean): Toggles from False to True while the event is being processed.
    • 







Display#


    

  • button_style (str): The button style, either ‘solid’ or ‘outline’.
    • 

  • button_type (str): A button theme; should be one of 'default' (white), 'primary' (blue), 'success' (green), 'info' (yellow), 'light' (light), or 'danger' (red)
    • 

  • icon (str): An icon to render to the left of the button label. Either an SVG or an icon name which is loaded from tabler-icons.io/.
    • 

  • icon_size (str): Size of the icon as a string, e.g. 12px or 1em.
    • 

  • disabled (boolean): Whether the widget is editable
    • 

  • name (str): The title of the widget
    • 





button = pn.widgets.Button(name='Click me', button_type='primary')
button








The clicks parameter will report the number of times the button has been pressed:


button.clicks





0


The on_click method can trigger function when button is clicked:


text = pn.widgets.TextInput(value='Ready')

def b(event):
    text.value = 'Clicked {0} times'.format(button.clicks)
    
button.on_click(b)
pn.Row(button, text)














Styles#


The color of the button can be set by selecting one of the available button_type values and the button_style can be 'solid' or 'outline':


pn.Row(
    *(pn.Column(*(pn.widgets.Button(name=p, button_type=p, button_style=bs) for p in pn.widgets.Button.param.button_type.objects))
    for bs in pn.widgets.Button.param.button_style.objects)
)












Icons#


The Button name string may contain Unicode characters, providing a convenient way to define common graphical buttons:


backward = pn.widgets.Button(name='\u25c0', width=50)
forward = pn.widgets.Button(name='\u25b6', width=50)
search = pn.widgets.Button(name='🔍', width=100)

pn.Row(backward, forward, search)








However you can also provide an explicit icon, either as a named icon loaded from tabler-icons.io/:


pn.Row(
    pn.widgets.Button(icon='alert-triangle-filled', button_type='warning', name='WARNING'),
    pn.widgets.Button(icon='bug', button_type='danger', name='Error')
)








or as an explicit SVG:


cash_icon = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
  <path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
  <path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" />
</svg>
"""

pn.widgets.Button(icon=cash_icon, button_type='success', name='Checkout', icon_size='2em')












Controls#


The Button widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pn.Row(button.controls, button)










Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).