Unable to remove class "bg-primary" from button

[groucho86]

Description

Very possible that I'm missing something obvious, but why is bg-primary still showing up when running this?

from nicegui import ui

ui.button('Click me!', on_click=lambda: ui.notify(f'You clicked me!')).classes(remove='bg-primary')

ui.run()

[falkoschindler]

The default background color of a button is not generated with a class but with a prop. Therefore removing "bg-primary" does not work.
If you want to set the background color to a different value you can use

ui.button('Click me!', color='white')

or

ui.button('Click me!').props('color=red')

or for a button without background

ui.button('Click me!').props('flat')

Note that these solutions yield different button text colors, also depending on whether you run in dark or light mode.

[Xtreemrus]

@falkoschindler Thanks for your reply, find this topic with search.

Although it is generally not recommended in web design, you can use !important to increase the priority of your custom styles. This will allow you to, for example, apply a currently popular gradient. I couldn't find other ways to set a gradient on a button, so this might be useful to someone :)

ui.button('Click me').style(add='background: linear-gradient(to right, yellow, orange) !important; color: black !important;')