Formatting in Dash

How to add a small circle icon buttons in dashboard python ?

1

Hi @aarush

Iā€™m not sure, but I think you can add images to button using boostrap component, that can be a solution. Perhaps @tcbegley know how to do that. :grinning:

Yes, you can do this in Bootstrap, but here is one way to do it without. If you are using Bootstrap, you can use the Bootstrap classes in the ClassName.

Here is an example using either Font Awesome or Unicode symbols:

image


import dash
import dash_html_components as html

FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css", FONT_AWESOME]


app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

roundbutton = {
    "border": None,
    "border-radius": "50%",
    "padding": 0,
    "backgroundColor": "blue",
    "color": "white",
    "textAlign": "center",
    "display": "block",
    "fontSize": 20,
    "height": 40,
    "width": 40,
    "margin": 20,
}


app.layout = html.Div(
    [
        html.Button(className="far fa-question-circle", style=roundbutton),
        html.Button(className="fa fa-list", style=roundbutton),
        html.Button("āœ”", style=roundbutton),
        html.Button("ā˜", style=roundbutton),
    ]
)


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

4 Likes

Very nice @AnnMarieW :smiley:

1 Like