Is there a way to remove all formatting from buttons (look like plain text)?

[Anindya088]

Question

Hi All,

I am trying to create a button that just looks like plain text, like a ui.label
So what I am trying now is this

ui.label('My Button').classes('text-red text-[12px] font-medium cursor-pointer'). \
    on('click', lambda: ui.notify('I pressed this button'))

I was thinking, if there is a way to use a proper ui.button, then that would be even better. If I use the flat prop, then mostly its done. But the hover over and highlighting is still there. How do I remove that?

I realized Tailwind classes like hover:bg-transparent or similar things don't work on the button element. So is there any easy way to do this?

Thanks a lot,
Anindya

[rodja]

The button and its styling is provided by Quasar: https://quasar.dev/vue-components/button. You can check out the appearance options there to configure it.

[falkoschindler]

@Anindya088 Why do you think ui.button would be better than ui.label? In my understanding ui.label with a click handler is a button with all styling stripped away.

[Anindya088]

Hi @falkoschindler ,

Actually I just try to stick to the default things because I don't understand very well the inner workings of these elements. So you know, like button is supposed to be for click things, labels and markdowns for text things, I try to follow that 😄

But as you said, if it's indeed the same then perfect, I can just use ui.labels for this purpose.

Thanks so much,
Anindya