Plotly Dash Button Component – A Simple Illustrated Guide

by
5/5 - (9 votes)

Welcome to the bonus content of “The Book of Dash”. 🤗

Here you will find additional examples of Plotly Dash components, layouts and style. To learn more about making dashboards with Plotly Dash, and how to buy your copy of “The Book of Dash”, please see the reference section at the bottom of this article.

💡 This article will focus on the html.Button component from Plotly, and easy ways to style a button using the dbc.Button from the dash-bootstrap-components library or the dmc.Button from the dash-mantine-components library.

A Button is an element a user can click on to take action in an app such as submit a form or generate a report. We will show you how to make the button interactive with callbacks, but first, we will focus on the style.

Button in Python Data App - Plotly Dash

👉 Recommended Tutorial: Plotly Dash Slider Component — Ultimate Guide

Plotly Dash html.Button

Here is a very simple Dash app. It just displays a button with the default style of an HTML button.

from dash import Dash, html

app = Dash(__name__)

button = html.Button("Enter")

app.layout = html.Div(button)

if __name__ == "__main__":
    app.run(debug=True)

Dash Bootstrap dbc.Button

Rather than customizing the style with CSS, this app uses a button from the dash-bootstrap-components library. You will see that the buttons are styled with fonts, colors and other design features of the Bootstrap theme.

💡 Bootstrap uses a subset of all colors to create a smaller color palette for generating color schemes. They these colors have the names “primary”, “secondary”, “success”, “warning”, “danger” and “info”. Using the color pallet from the theme makes it easy to create a beautiful app with a consistent design.

Note that we use the className prop. The “me-1” adds a margin, so there is space between the buttons.

See the all the Bootstrap utility classes at the Dash Bootstrap Cheatsheet app. This handy cheatsheet is made by a co-author of “The Book of Dash”.

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

buttons = html.Div(
    [
        dbc.Button("Primary", color="primary", className="me-1" ),
        dbc.Button("Secondary", color="secondary", className="me-1"),
        dbc.Button("Success", color="success", className="me-1"),
        dbc.Button("Warning", color="warning", className="me-1"),
        dbc.Button("Danger", color="danger", className="me-1"),
        dbc.Button("Info", color="info"),
    ], className= "m-4"
)

app.layout = dbc.Container(buttons)

if __name__ == "__main__":
    app.run_server(debug=True)

Feel free to watch Adam’s explainer video on Bootstrap and styling your app if you need to get up to speed! ⤵️

Introduction to Dash Bootstrap - Styling your App

Dash Bootstrap dbc.Buttons with dark and light themes

You can change the theme of your app with one line of code, simply by changing the external_stylesheets. Here are the buttons with 4 of the 26 themes available in the dash-bootstrap-components library.

👉 Learn more about designing your Dash app with a Bootstrap theme at the Dash Bootstrap Theme Explorer, a site made by a co-author of “The Book of Dash”.

Figure: Dash Bootstrap Theme Explorer App

Let’s have a look at differently-themed Dash buttons next!

Cyborg theme:

app = Dash(__name__, external_stylesheets=[dbc.themes.CYBORG])

Solar theme:

app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR])

Minty theme:

app = Dash(__name__, external_stylesheets=[dbc.themes.MINTY])

Sketchy theme:

app = Dash(__name__, external_stylesheets=[dbc.themes.SKETCHY])

Dash Bootstrap dbc.Buttons with Different Styles

Here are some of the options to customize the dbc.Button component. See more examples in the Dash Boostrap Components documentation.

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

buttons = html.Div(
    [
        dbc.Button("Regular", className="me-1"),
        dbc.Button("Outline", outline=True, color="primary", className="me-1"),
        dbc.Button("Disabled", disabled=True, className="me-1"),
        dbc.Button("Large", size="lg", className="me-1"),
        dbc.Button("Small", size="sm", className="me-1"),
        dbc.Button("Link", color="link"),

    ], className= "m-4"
)

app.layout = dbc.Container(buttons)

if __name__ == "__main__":
    app.run_server(debug=True)

Dash Bootstrap dbc.Button with Icons

You can add Bootstrap and/or Font Awesome icons to your Dash Bootstrap components. To learn more, see the Icons section of the dbc docs.

Here is an example app:

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME, dbc.icons.BOOTSTRAP])

FA_icon = html.I(className="fa-solid fa-cloud-arrow-down me-2")
FA_button =  dbc.Button([FA_icon, "Download"], className="me-2")

BS_icon = html.I(className="bi bi-cloud-arrow-down-fill me-2")
BS_button = dbc.Button([BS_icon, "Download"])

app.layout = dbc.Container([FA_button, BS_button])

if __name__ == "__main__":
    app.run_server(debug=True)

Dash Bootstrap dbc.Button with Dash Iconify

Another way to add icons to Dash components is to use the Dash Iconify library. Dash Iconify gives you access to over 100,000 free icons. Browse the icon sets here:

You can also specify the color, size, rotation, flip, style and more. See the props available in Dash Iconify GitHub.

You can find lots of examples of components with Dash Iconify in the dash-mantine-coponents documentation, but you can also use these icons with any dash component, including dash-bootstrap-components.

Here is an example:

from dash import Dash
import dash_bootstrap_components as dbc
from dash_iconify import DashIconify

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

download_icon = DashIconify(icon="bi:cloud-download", style={"marginRight": 5})
download_button =  dbc.Button([download_icon, "Download"], className="me-2")

settings_icon = DashIconify(icon="carbon:settings-check", style={"marginRight": 5})
settings_button = dbc.Button([settings_icon, "Settings"])

app.layout = dbc.Container([download_button, settings_button])

if __name__ == "__main__":
    app.run_server(debug=True)

Dash Mantine Components dmc.Button

This app uses a button from the dash-mantine-components library.

You will see that the buttons are styled with fonts and colors and design from the Mantine Themes.

As with the dash-boostrap-components, you can customize the style in many ways. See the Dash Mantine Components Documentation to see a lot more options.

from dash import Dash
import dash_mantine_components as dmc
from dash_iconify import DashIconify

app = Dash(__name__)

buttons = dmc.Group(
    [
        dmc.Button("Default"),
        dmc.Button("Subtle", variant="subtle"),
        dmc.Button("Gradient", variant="gradient"),
        dmc.Button("Light", variant="light"),
        dmc.Button("Outline", variant="outline"),
        dmc.Button("Radius- lg", radius="lg"),
        dmc.Button("Compact", compact=True),
        dmc.Button("Icon", leftIcon=[DashIconify(icon="fluent:settings-32-regular")],
        ),
    ]
)

app.layout = dmc.Container(buttons)

if __name__ == "__main__":
    app.run_server(debug=True)

Plotly Dash App – Input and Button Side-by-Side

To place the button next to the dbc.Input, use the dbc.Row and dbc.Col components.

from dash import Dash
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.PULSE])

form = dbc.FormFloating(
    [
        dbc.Input(id="username"),
        dbc.Label("Enter username"),
    ],
)
button = dbc.Button("Submit")


app.layout = dbc.Container(
    [
        dbc.Row([dbc.Col(form, width=4), dbc.Col(button, width="auto")])
    ], fluid=True
)


if __name__ == "__main__":
    app.run_server(debug=True)

Plotly Dash App – Form with a Button

In this app, a user can submit a form by clicking on the button. The callbacks make this app interactive.

from dash import Dash, html, Input, Output, State
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.PULSE])

form = dbc.FormFloating(
    [
        dbc.Input(id="username"),
        dbc.Label("Enter username"),
    ]
)
button = dbc.Button("Submit")
output_container = html.Div(className="mt-4")

app.layout = dbc.Container([form, button, output_container], fluid=True)


@app.callback(
    Output(output_container, "children"),
    Input(button, "n_clicks"),
    State("username", "value"),
    prevent_initial_call=True,
)
def greet(_, name):
    return f"Welcome {name}!" if name else "Please enter username"


if __name__ == "__main__":
    app.run_server(debug=True)

Plotly Dash Example Index

See more examples of interactive apps with buttons in the Dash Example Index

Reference

Order Your Copy of “The Book of Dash” Today!

The Book of Dash Authors

Feel free to learn more about the book’s coauthors here:

Ann Marie Ward:

Adam Schroeder:

Chris Mayer: