Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

html.Button: how to use data-activates?

Hello,

Im trying to build a sidebar like the one presented here: Bootstrap Sidenav - examples & tutorial

I Currently have this button:

                html.Button(
                    #html.Span([html.I(className="fas fa-plus-circle ml-2")]),
                    
                    [html.Span(className="fas fa-cog fa-lg")],
                    id="buttonModel50",
                    className="button-collapse",
                    data-activates="slide-out",
                    n_clicks=0
                ),  

But I get the following error:
data-activates=“slide-out”,
^
SyntaxError: keyword can’t be an expression

How to use data-activates properly?

Did you find the way how to use MDB components in Dash? I’m new in frontend, i can’t find how to use it :frowning:

For anyone looking for how to use the data-* attributes in Python, you can unpack a dictionary in the arguments of the Dash component:

html.Button(
    [html.Span(className="fas fa-cog fa-lg")],
    id="buttonModel50",
    className="button-collapse",
    n_clicks=0,
    **{"data-activates": "slide-out"},
),