✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Styling Buttons

I have a datatable, which comes with EXPORT button. It works perfectly.

I actually have a bunch of data behind the scenes and I also need options to download bits of data as CSV. No problem, solutions have been posted on this forum using df.to_csv() to create a string and returning that string to the href of an html.A. Also working just fine.

Cool. So all in all no complaints… Except… The user interfaces look different. I would be happy for the html.A to be styled as a Dash button. Or to have a way to enter a CSS for the button so I could then apply that same format to the html.A Or embed the html.A into the button except I cant get it to work (and which apparently is a big html “no-no”).

So basically I am stuck with a less than perfect look-and-feel.

I doubt that I am the first to try to solve this… but any pointers appreciated. Regards, T.

Grrr… Sorry to waste your time reading this. Apparently all that I have to do is post the question and then the next thing I try works!!.. Specifically, put the button inside the A and take some care with the id’s.

from urllib.parse import quote

html.A(html.Button('Export Vpp Button', id ='export-vpp', n_clicks=0 ),
	 id='blank-vpp', download="rawdata.csv", href="", target="_blank")

@app.callback(Output('blank-vpp','href'),
	[Input('export-vpp', 'n_clicks')])
def export_vpp(n_click):
	if n_click > 0:
		csv_string = df.to_csv(index=False, encoding='utf-8')
		csv_string = "data:text/csv;charset=utf-8," + quote(csv_string)
	return csv_string

Looks great. And works fine