ButtonIcon.ipynb

Kernel: Unknown Kernel

import panel as pn
pn.extension()

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

This widget displays a default icon initially. Upon being clicked, an active_icon appears for a specified toggle_duration.

For instance, the ButtonIcon can be effectively utilized to implement a feature akin to ChatGPT's copy-to-clipboard button.

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

• active_icon (str): The name of the icon to display when toggled from tabler-icons.io/

• clicks (integer): The number of times the icon was clicked.

• icon (str): The name of the icon to display from tabler-icons.io/ or an SVG.

• toggle_duration (integer): The number of milliseconds the active_icon should be shown for and how long the button should be disabled for.

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

Display

• description (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.

• disabled (boolean): Whether the widget is editable

• name (str): The title of the widget

• size (str): Optional explicit size as a CSS font-size value, e.g. '1em' or '20px'.

---

button = pn.widgets.ButtonIcon(icon="heart", size="4em", description="favorite")
button

You can also replace the description with name to have it shown on the side.

button = pn.widgets.ButtonIcon(icon="heart", size="4em", name="favorite")
button

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

button.clicks

You can bind to the Button to trigger actions when the Button is clicked.

indicator = pn.indicators.LoadingSpinner(value=False, size=25)

def update_indicator(event):
    if not event:
        return
    indicator.value = not indicator.value

pn.bind(update_indicator, button, watch=True)

pn.Column(button, indicator)

You can also bind to the clicks parameter

def handle_click(clicks):
    return f'You have clicked me {clicks} times'

pn.Column(
    button,
    pn.bind(handle_click, button.param.clicks),
)

Alternatively you can use the on_click method to trigger a function when the 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)

By default, when value is True, the active_icon (heart-filled) is the filled version of the icon (heart).

If you'd like this to be changed, manually set the active_icon.

The icon will automatically adapt to the specified width/height but you may also provide an explicit size:

pn.widgets.ButtonIcon(icon="clipboard", active_icon="check", size="4em")

The toggle_duration, in milliseconds, will determine how long the active_icon should be shown for and how long the button should be disabled for.

pn.widgets.ButtonIcon(icon="clipboard", active_icon="check", toggle_duration=2500, size="4em")

You can also use SVGs for icons.

SVG = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ad-off" 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="M9 5h10a2 2 0 0 1 2 2v10m-2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2" /><path d="M7 15v-4a2 2 0 0 1 2 -2m2 2v4" /><path d="M7 13h4" /><path d="M17 9v4" /><path d="M16.115 12.131c.33 .149 .595 .412 .747 .74" /><path d="M3 3l18 18" /></svg>
"""
ACTIVE_SVG = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ad-filled" 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="M19 4h-14a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3zm-10 4a3 3 0 0 1 2.995 2.824l.005 .176v4a1 1 0 0 1 -1.993 .117l-.007 -.117v-1h-2v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-4a3 3 0 0 1 3 -3zm0 2a1 1 0 0 0 -.993 .883l-.007 .117v1h2v-1a1 1 0 0 0 -1 -1zm8 -2a1 1 0 0 1 .993 .883l.007 .117v6a1 1 0 0 1 -.883 .993l-.117 .007h-1.5a2.5 2.5 0 1 1 .326 -4.979l.174 .029v-2.05a1 1 0 0 1 .883 -.993l.117 -.007zm-1.41 5.008l-.09 -.008a.5 .5 0 0 0 -.09 .992l.09 .008h.5v-.5l-.008 -.09a.5 .5 0 0 0 -.318 -.379l-.084 -.023z" stroke-width="0" fill="currentColor" /></svg>
"""

pn.widgets.ButtonIcon(icon=SVG, active_icon=ACTIVE_SVG, size='4em')

Controls

The ButtonIcon 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(jslink=True), button)