[Button] Disabled buttons should have `cursor: not-allowed` by default

[Maia313]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Disabled buttons should have cursor not allowed by default

Examples 🌈

No response

Motivation 🔦

Helps user better notice the state of the buttons

[hbjORbj]

Can you elaborate on your point?

Disabled buttons already have the default cursor, not the pointer.

Example: https://codesandbox.io/s/basicbuttons-material-demo-forked-oeg9mk

[Maia313]

To make it more intuitive for the user, on hover they should probably have cursor: not-allowed;

[hbjORbj]

Does that align with material design, @danilo-leal ?

Codesandbox for cursor: not-allowed with Button: https://codesandbox.io/s/basicbuttons-material-demo-forked-2pe2qn?file=/demo.js

[danilo-leal]

This is a tough one and I don't think Material Design is the place to refer to in order to find out the optimal way. This exact same discussion happened in this thread #27719 (comment) and I don't believe there was a final conclusion.

I'd appreciate it if you @Maia313 read through it and added your perspective. Also, if you happen to have any documentation about it, that would be great.

[henriqueholtz]

You can customize it creating your theme also.

[hongdeyuan]

customize it, Share a tip：

// css
.pointer-events-none {
    pointer-events: none;
}

.wrapper {
    cursor: not-allowed;
}


// Dom
<div class="wrapper">
    <button class="pointer-events-none">Some Text</button>// OR <MuiButton>....</MuiButton>
</div>

[Focus-me34]

Actually up... It's a shame that there's no way to change the cursor of an MUI button when it is in the "disabled" state. Tried everything, changing the style in sx in style and finally in my global SCSS file. Nothing worked. The button seems to be completely out of flow (even though tab-index="-1"). It's even impossible to select the button using the browser console. I feel like it's not optimal.