dbc.Button forgets its styling when using href prop

Dash Python
1

Hi Everyone. There is already a similar question back from 2021, but the issue hasn’t been solved yet.

When I use dbc.Button and set a href=“…” prop, the Button forgets its pre-set font and alignment setting and I cannot get it back.

dbc.Button(
    "External link",
    color="dark",
    className="me-2 col-1",
    id="external-link-button1",
    href="https://www.google.com/",
    target="_blank",
    n_clicks=0,
),

Any idea how I could get back my normal styling?

2

P.S. so far I have solved the problem with patching the style from css such as

#external-link-button1,
.export {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

… but maybe there is a better solution?

3

Hi @marossy and welcome to the Dash community :slight_smile:

I’m not sure what you mean by the button forgets it’s pre-set font and alignment when using the href prop. I can’t duplicate the issue.

In the post you linked to, it looks like they forgot to include the Bootstrap stylesheet.

Try running this example - it should look like this:

image

import dash_bootstrap_components as dbc
from dash import Dash, html

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


btn=dbc.Button(
    "Button",
    color="dark",
    className="me-2",
    id="button1",  
    n_clicks=0,
)


btn_href =dbc.Button(
    "External link",
    color="dark",
    className="me-2",
    id="external-link-button1",
    href="https://www.google.com/",
    target="_blank",
    n_clicks=0,
)

app.layout = dbc.Container([btn, btn_href])

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