Button in Python Data App - Plotly Dash

Learn to use the Button for interactive data apps in python. We'll review numerous types of buttons, their styling, and learn to incorporate it into a Dash app.

View my book - The Book of Dash:

My GitHub Code:

Buttons Bonus Book Tutorial:

Dash Bootstrap CheatSheet:

Dash Bootstrap Button:

Iconify Icon List:

Dash Mantine Button:

Plotly Forum:

Video layout:
00:00 - What you Will Learn and Code
02:34 - Dash HTML Button
03:18 - Dash Bootstrap Button
06:31 - Styling of Dash Bootstrap Button
08:37 - Font Awesome and Bootsrap Icons
10:43 - Iconify Icons with Button
13:22 - Dash Mantine Button
14:50 - Button with Form
17:50 - Knowing which Button was clicked

************************************************************************
👉 Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:

[nidhipathak]

How to show n hide button when selecting the value from dropdown

[akritishrestha]

How to link a javascript to python, like you did css with the help of classname

[celestinhakizimana]

@Adam, can you do a video of choropleth map such that when someone select a state, it highlights directly in the map ?

[PB-udux]

Great videos. I am just a little bit confused what playlist I need to start first to learn dash plotly from scratch.

[Consensus]

Hey Adam, First of all thank you for your incredible work. You helped me a lot. I have a problem with the button element. What I am facing now is that I have created a bunch of buttons but can only use one as an input because only one is clickable. I have two buttongroups and from each I want to select a button to create an output. I am looking for a possibility to click two buttons and use these two as an input to create a graph. But I also want to see the two clicked buttons on my dashboard. Are there any options to do this?

[sandervalentijn]

Hi Adam,

Thanks again for another great video! I've been struggling with using buttons in my dashboard and this helped a lot.

I have a question: I have a dashboard with four buttons. The buttons are used to update a graph, together with a date slider. I have managed to update the graph with the 'clicked button' using n_clicks together with ctx.triggered_id (by your example: button_clicked = ctx.triggered_id).

This works fine (thanks again, was trying hard to get that fixed) but when I also want to adjust the date (via the date slider) the figure doesn't update because the button is no longer 'clicked on'. What I mean is, when I click on one of the 4 buttons, it is 'active'. But as soon as I click anywhere else in my dashboard, the button isn't 'active' (or clicked on) anymore (thus the button_clicked becomes empty again).

Do you know how I can keep the button 'clicked on' or 'active' so to say when clicking somewhere else in my dashboard? Using the property 'Active = True' doesn't work. Maybe I can fix it with setting State or 'PreventUpdate', or using something like button_clicked = 'last button clicked on', but there might be an easier solution?

Thanks again man!
Sander

[pablosantos]

Great video!! Do you have a video on the channel, talking about dash board with 3d objects? If not, do you intend to talk about it at some point? I know there is vtk with plotly but I didn't find many videos about it. thanks!

[aesdefined]

Hey Adam, I'm new to the channel. Have you made any videos about exporting a page of a dash app as a pdf report or formatting a dash app for static reports?

[nidhipathak]

If drop-down selected button shoe else no button