Toggle#

Download this notebook from GitHub (right-click to download).

import panel as pn
import panel_material_ui as pmui

pn.extension()

The Toggle widget allows toggling a single condition between True/False states. This widget is interchangeable with the Checkbox widget.


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 customization guides.




Core#


    

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

  • value (boolean): Whether the button is toggled or not
    • 







Display#


    

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

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

  • end_icon (str): An icon to render to the right of the button label. Either an SVG or an icon name which is loaded from Material UI Icons.
    • 

  • icon (str): An icon to render to the left of the button label. Either an SVG or an icon name which is loaded from Material UI Icons.
    • 

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

  • label (str): The title of the widget.
    • 

  • variant (str): The button style, either ‘solid’, ‘outlined’, ‘text’.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • button_style: Alias for variant
    • 

  • button_type: Alias for color
    • 

  • name: Alias for label
    • 





toggle = pmui.Toggle(name='Toggle', button_type='success', value=True)

toggle







            
            
Toggle.value is either True or False depending on whether the button is toggled:


toggle.value





True








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(
    *(pmui.Toggle(label=color, color=color, value=True, width=100)
    for color in pmui.Toggle.param.color.objects)
)







            
            




Icons#


The Toggle name string may contain Unicode and Emoji characters, providing a convenient way to define common graphical buttons.


backward = pmui.Toggle(name='\u25c0', width=50)
forward = pmui.Toggle(name='\u25b6', width=50)
search = pmui.Toggle(name='🔍', width=100)
play = pmui.Toggle(name="▶️ Play", width=100)
pause = pmui.Toggle(name="Pause ⏸️", width=100)

pn.Row(backward, forward, search, play, pause)







            
            
However you can also provide an explicit icon, either as a named icon loaded from Material Icons:


pmui.Toggle(icon='lock', button_type='light', icon_size='2em')







            
            
or as an explicit SVG:


shuffle_icon = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-shuffle" 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="M18 4l3 3l-3 3" />
  <path d="M18 20l3 -3l-3 -3" />
  <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5" />
  <path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3" />
</svg>
"""

pmui.Toggle(icon=shuffle_icon, button_type='success', name='Shuffle', icon_size='2em')







            
            
You may also provide an end_icon:


pmui.Toggle(icon='send', button_type='light', icon_size='2em', end_icon='rocket', label='Sent')







            
            




Controls#


The Toggle 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(toggle.controls(jslink=True), toggle)







            
            


Download this notebook from GitHub (right-click to download).