Add remove button style

Dash Python
1

Hello everyone, I have implemented add remove buttons on my website and now I am looking to change button appearances.

At the moment I am following button style.

Screenshot from 2021-12-31 14-12-56

And I am looking to have something like following:

Screenshot from 2021-12-31 14-08-14

Can someone please help me find right resources to achieve this?

Thank You.

2

Hi @Push

If you are using dash-bootstrap-components you can do something like this:

from dash import Dash
import dash_bootstrap_components as dbc


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


app.layout = dbc.Container(
    [
        dbc.Button(className="bi bi-trash  rounded-circle m-4", outline=True, color="primary"),
        dbc.Button(className="bi bi-plus-lg rounded-circle", outline=True, color="primary")
    ],
)

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

image

And you can fine tune the design using other bootstrap classes. You may find this cheatsheet helpful: https://dashcheatsheet.pythonanywhere.com/

If you are not using Bootstrap, see this post: Formatting in Dash - #3 by AnnMarieW

1 Like
3

Hi @AnnMarieW

Thanks for the help! I have marked it as a solution so others can follow your solution code.

1 Like