How to customize button disabled color / look?

[jeffective]

Question

How would I change how a button looks when disabled? For example, I want it to appear darker than default or go for a more grey than darkened look?

[natankeddem]

Is this helpful?

from nicegui import ui

ui.button().props('color="primary" disable label="Disabled"')
ui.button().props('round color="primary" disable icon="card_giftcard"')
ui.button().props('flat color="primary" disable label="Disabled"')
ui.button().props('flat round color="primary" disable icon="card_giftcard"')
ui.button().props('outline color="primary" disable label="Disabled"')
ui.button().props('outline round color="primary" disable icon="card_giftcard"')
ui.button().props('push color="primary" disable label="Disabled"')
ui.button().props('push round color="primary" disable icon="card_giftcard"')
ui.button().props('class="glossy" color="primary" disable label="Disabled"')
ui.button().props('class="glossy" round color="primary" disable icon="card_giftcard"')

ui.button().props('color="grey" disable label="Disabled"')
ui.button().props('round color="grey" disable icon="card_giftcard"')
ui.button().props('flat color="grey" disable label="Disabled"')
ui.button().props('flat round color="grey" disable icon="card_giftcard"')
ui.button().props('outline color="grey" disable label="Disabled"')
ui.button().props('outline round color="grey" disable icon="card_giftcard"')
ui.button().props('push color="grey" disable label="Disabled"')
ui.button().props('push round color="grey" disable icon="card_giftcard"')
ui.button().props('class="glossy" color="grey" disable label="Disabled"')
ui.button().props('class="glossy" round color="grey" disable icon="card_giftcard"')

ui.run()

[falkoschindler]

I think the easiest way to change such detailed styling is to add some custom CSS to the head HTML:

ui.add_head_html('''
<style>
    .q-btn:disabled {
        background-color: grey !important;
        opacity: 0.3 !important;
    }
</style>
''')
ui.button('Enabled')
ui.button('Disabled').disable()

To only affect individual buttons, you can introduce and address a custom class like "my-button":

ui.add_head_html('''
<style>
    .my-button:disabled {
        background-color: grey !important;
        opacity: 0.3 !important;
    }
</style>
''')
ui.button('Enabled').classes('my-button')
ui.button('Disabled').classes('my-button').disable()

Note that "!important" is needed in this case to overrule Quasar's default styling.

[jeffective]

thanks! i went for the first option, worked great!
for anyone else, if you are using a page decorator, make sure to put the ui.add_head_html as part of that page creation function.

@ui.page('/')
async def hmi(client: nicegui.Client):
    ui.button('another button')
    #etc
    ui.add_head_html('''
    <style>
        .q-btn:disabled {
            background-color: grey !important;
            opacity: 0.3 !important;
        }
    </style>
    ''')

here is the final look (for a human machine interface application):

[svhb1000]

Is this still supported?
I make a small test like below, but the resulting button stays in a blue (disabled) color.

from nicegui import ui

@ui.page('/')
async def hmi():
    b = ui.button('another button').classes("the_button")
    b.disable()
    #etc
    ui.add_head_html('''
    <style>
        .the_button:disabled {
            background-color: red !important;
            opacity: 0.3 !important;
        }
    </style>
    ''')

ui.run(port=8888, reload=True)

[evnchn]

You will likely have to use CSS layers

[falkoschindler]

Exactly. NiceGUI 3.0 introduced CSS layers, and for !important rules, layered styles beat unlayered styles. Since you're adding unlayered CSS, Quasar's layered !important wins over your unlayered !important.

Solution: Add your CSS to a layer with higher !important priority (earlier layers win for !important):

ui.add_css('''
    @layer theme {
        .the_button:disabled {
            background-color: red !important;
            opacity: 0.3 !important;
        }
    }
''')