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

[Maia313]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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 https://github.com/mui/material-ui/pull/27719#discussion_r690716745 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.

[R-Mohammed-Hasan]

In button.tsx generated by ShadCn, you can change the cursor in there. Here is short snippet where cursor will be not-allowed for disabled buttons

const buttonVariants = cva( 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary border border-solid border-slate-500 text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-10 px-4 py-2', sm: 'h-9 rounded-md px-3', lg: 'h-11 rounded-md px-8', icon: 'h-10 w-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, );

Just. change the below line which is by default to your preferred stylings

disabled:pointer-events-none

[ArslanKhann]

It is not that difficult to change the cursor when button is disabled.

sx={{
      "&:disabled": {
           cursor: "not-allowed",
           pointerEvents: "all !important",
      },
}}

[gsavchenko]

The premise of this issue seems incorrect according to the MDN documentation. It appears that the not-allowed cursor is used for indicating a drag & drop action will not be carried out. There should be other ways to indicate that a button is disabled outside of violating the specification. Just my 2 cents.