Wrong UI on Buttons with "to" property when disabled

[jsayer101]

Environment

---

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.1
• CLI Version: 3.11.1
• Nitro Version: 2.9.5
• Package Manager: npm@10.2.3
• Builder: -
• User Config: modules
• Runtime Modules: @nuxt/ui@2.15.0
• Build Modules: -

---

Version

v2.15.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-bx4vr7

Description

Using the attribute "to" and disabling a button create a bug where the button is functionally disabled but the UI doesn't really reflect the change (wrong cursor and hover effects).

Additional context

No response

Logs

No response

[moshetanzer]

Screen.Recording.2024-03-31.at.16.53.42.mov

@jsayer101 see above seems to be working correctly?

[moshetanzer]

@jsayer101 you can add custom hover styles using css 😄 . Closing this for now.

[jsayer101]

@moshetanzer

@jsayer101 you can add custom hover styles using css 😄 . Closing this for now.

Yes, I can, but shouldn't it be the default behavior ? There shouldn't have any difference while using a link...

Disabled should be disabled, without any hover effects...

[sandros94]

also duplicate of #473, you can read more at this comment's link

This will make the link semantically valid. However, the styling will not be applied as Tailwind CSS disabled variant can't be used for this case.

Followed recommendations from this article: https://www.scottohara.me/blog/2021/05/28/disabled-links.html