Joy UI: Disabled Link IconButton appearance appears to still be enabled

[BSoDium]

Steps to reproduce

Link to live example: https://codesandbox.io/s/peaceful-estrela-dr8zfz

Steps:

1. Create a Joy UI IconButton
2. Set its component prop to either "a" or Link from react-router-dom
3. Set its disabled prop to true
4. The button is still clickable and visually appears to be enabled because it is

Current behavior

The button appears to still be enabled even though it shouldn't be.

Expected behavior

The button should be disabled (no pointer-events, less contrast with the background, etc...)

Context

I am simply trying to have a link button be disabled.

My guess: in the DOM, the disabled prop cannot be applied to the a element, which messes up the styles since the selector is literally:

.css-randomId-JoyIconButton-root:disabled {
  // rules
}

Your environment

Tested on Chrome version 127.0.6533.89 (Official Build) (arm64)

npx @mui/envinfo

``` System: OS: macOS 14.6 Binaries: Node: 22.4.1 - /opt/homebrew/bin/node npm: 10.8.2 - /opt/homebrew/bin/npm pnpm: Not Found Browsers: Chrome: 127.0.6533.100 Edge: Not Found Safari: 17.6 npmPackages: @emotion/react: ^11.11.4 => 11.13.0 @emotion/styled: ^11.11.5 => 11.13.0 @mui/base: 5.0.0-beta.42 @mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d @mui/joy: ^5.0.0-beta.48 => 5.0.0-dev.240424162023-9968b4889d @mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab @mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.15 @mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab @types/react: ^18.3.3 => 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.5.4 => 5.5.4 ```

Search keywords: IconButton, disabled, Link, react-router-dom, enabled

[KumarNitin19]

Yes @BSoDium , there is no disable attribute on a tag. Disabled attribute is only available for few elements (Button, Input, Textarea, Select, Option, ...etc). So you have to handle it using styles.

[BSoDium]

I totally agree with you on the fact that an a element cannot have a disabled state, but if you look at the example from the documentation for link buttons, the normal Button (as opposed to IconButton) does handle that edge case (it can become disabled by setting the disabled prop to true).

Plus, it is a bit misleading to leave the disabled prop available to the user if it is not intended to be used in this specific case, isn't it?

If you are not planning on handling it any time soon, what clean solution would you recommend to palliate to this?

[KumarNitin19]

@BSoDium Yes it's a bug, I will try to fix it and raise a PR for the same. Also if it's urgent for you then try to add some style on the button to disable it. Something like pointer-event:none and color to be grey.

[KumarNitin19]

You can try this as well, but not a solution.

[BSoDium]

I'll experiment with this, greatly appreciate the reactivity, thank you for the help!

[siriwatknp]

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI

[BSoDium]

Are you guys still reviewing and accepting PRs? Or is everything fully on hold?