Handling Button Click events

[n-srinidhi]

Hi! I am using ui.button() to display only icons in a login form. Keeping it disabled doesn't look as expected, so I am trying to handle the on click behavior. Basically I want the button to do nothing, Even If I click on it. The two buttons have the name attribute as btn_pass and button. I am adding this to the serve function, But I still get the loading spinner box. How can I fix it?

elif q.args.btn_pass:
    await q.page.save()

elif q.args.button:
     await q.page.save()

[mturoci]

Keeping it disabled doesn't look as expected

Can you elaborate on this one?

But I still get the loading spinner box

The loading spinner is meant to prevent double submission e.g. user clicks a button once, then your server needs to do some heavy calculations, but user gets impatient so clicks the button multiple times, leaving you with many more calculations / background jobs than needed. Loading prevents further interactions until Wave app responds - updates the UI.

The loading spinner can be sidestepped by doing a "fake" UI update, e.g. in your button handler do something like q.page['non-existent'].items = []. This tells Wave to try update a card called non-existent, but since it does not exist (unless you named a card like this), it has no effect other than removing the spinner.

Note that having a button that does nothing is not recommended as it may be confusing to your users.

[n-srinidhi]

When I set disabled=True, The button has a shadow which doesn't look good. Is there any component I can use instead of a button, to only display these icons?

[mturoci]

I see, so you are trying to hack around with buttons to get the icons. Standalone icons are not yet supported (#1871) so your best bet is to use ui.image with your own svg icon instead.

[n-srinidhi]

@mturoci Thank you.