Button#

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

import panel as pn
import panel_material_ui as pmui
from panel_material_ui import Button, Column, Row

pn.extension()

Buttons allow users to take actions, and make choices, with a single tap. 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.


Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like


    

  • Modal windows
    • 

  • Forms
    • 

  • Cards
    • 

  • Toolbars
    • 



The panel-material-ui Button is built on top of the Material UI 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 customization guides.




Core#


    

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

  • disabled (boolean): Whether the button is clickable.
    • 

  • href (str): An optional link to navigate to when clicking the button.
    • 

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

  • target (str): Where to open the href link. Default is _self, i.e. in the current window or tab.
    • 







Display#


    

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

  • disable_elevation (boolean): Whether to apply elevation to the Button to visually separate it from the background.
    • 

  • 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
    • 











Basic Button#


The Button comes with three variants: text (default), contained, and outlined.


Row(
    Button(label="Text", variant="text"),
    Button(label="Contained", variant="contained"),
    Button(label="Outlined", variant="outlined"),
)







            
            




Text Button#


Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content.


Row(
    Button(label="Primary"),
    Button(label="Disabled", disabled=True),
    Button(label="Link", href="#text-button"),
)







            
            




Contained button#


Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.


Row(
    Button(label="Contained", variant="contained"),
    Button(label="Disabled", variant="contained", disabled=True),
    Button(label="Link", variant="contained", href="#contained-buttons"),
)







            
            




Outlined Button#


Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren’t the primary action in an app.


Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.


Row(
    Button(label="Primary", variant="outlined"),
    Button(label="Disabled", variant="outlined", disabled=True),
    Button(label="Link", variant="outlined", href="#outlined-buttons"),
)







            
            





Handling Clicks#


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


toggle_button = Button(label="Start Spinning", variant="contained")
indicator = pmui.LoadingSpinner(value=False, size=25)

def update_indicator(event):
    indicator.value = not indicator.value
    toggle_button.label="Stop Spinning" if indicator.value else "Start Spinning"

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

Row(toggle_button, indicator)







            
            
Alternatively you can use the on_click method to trigger a function when the button is clicked:


click_button = Button(label="Increment", align="center")
text = pmui.TextInput(value='Clicked 0 times', disabled=True)

def handle_click(event):
    text.value = 'Clicked {0} times'.format(click_button.clicks)

click_button.on_click(handle_click)
    
Row(click_button, text)







            
            




Disabled and Loading#


Like any other widget the Button can be disabled and/ or set to loading:


Button(label="Loading", disabled=True, loading=True, color="primary")







            
            




Color#


The color of the button can be set by selecting one of the available color values.


Row(
    Button(color="secondary", label="Secondary"),
    Button(color="success", variant="contained", label="Success"),
    Button(color="error", variant="outlined", label="Error"),
)







            
            




Sizes#


For larger or smaller buttons, use the size parameter.


Column(
    Row(
        Button(size="small", label="Small", align="center"), 
        Button(size="medium", label="Medium", align="center"),
        Button(size="large", label="Large", align="center"),
    ),
    Row(
        Button(size="small", label="Small", variant="outlined", align="center"), 
        Button(size="medium", label="Medium", variant="outlined", align="center"),
        Button(size="large", label="Large", variant="outlined", align="center"),
    ),
    Row(
        Button(size="small", label="Small", variant="contained", align="center"), 
        Button(size="medium", label="Medium", variant="contained", align="center"),
        Button(size="large", label="Large", variant="contained", align="center"),
    )
)







            
            
Please note that different from Material UI you have to align our button center if you so wish.






Buttons with Icons and label#


Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.


You may provide an icon either as a named icon from Material Icon


Row(
    Button(label="Delete", variant="outlined", icon="delete_icon"),
    Button(label="Send", variant="contained", icon="send_icon"),
)







            
            
or as an explicit SVG:


search_icon = """
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
"""

Row(
  Button(icon=search_icon, icon_size='1em', label='Search', variant="outlined"),
  Button(icon=search_icon, icon_size='2em', label='Search', variant="contained"),
)







            
            
You can also provide an end icon:


Button(label="Send", variant="contained", end_icon="send_icon")







            
            
Alternatively you may use html codes and emojis in your label.


Row(
    Button(label='\u25c0', variant="outlined", width=50),
    Button(label='\u25b6', variant="outlined", width=50),
    Button(label='🔍', variant="outlined", width=100),
    Button(label="💾 Save", variant="outlined", width=100),
    Button(label="Copy ✂️", variant="outlined", width=100),
)







            
            




Icon Button#


See ButtonIcon






Aliases#


For backwards compatibility with Panel certain parameters are allowed as aliases:


    

  • button_style: Alias for variant
    • 

  • button_type: Alias for color
    • 

  • name: Alias for label
    • 



Button(label="Alias", button_style="outlined", button_type="success")







            
            




API#




Parameters#


Button(label="Click Me").api(jslink=True)







            
            






References#


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity.


Learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.


See also the Material UI Button Reference and API documentation for inspiration.




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