Guidance on using the disabled state for buttons

[pguptaDS]

Hey team!
In this use case where the user doesn't have permission to create an account, is the guidance to disable the button and show a tooltip or should we allow the user to click on the button and then show an error message? I am showing both options below for reference. I'd appreciate quick clarification here so I can guide my FE team in the right direction. Thanks!

[SiTaggart]

Hi @pguptaDS

I've cover the constraint first and then the options.

When a button is disabled (or any UI control for that matter) everything about it is rendered unusable. That includes focusing, hovering, and clicking on it. As a result you can't add a tooltip (or anything interactive) to a disabled UI control.

Some options to consider for this use case include:

• Remove the button entirely. There is a real chance that the absence of a control will never lead to a user asking the question "why can't I do this?". If user research strongly suggests that this is a frequent problem then we can address it with UI messaging, but if it's not, lets no add something to the UI we don't need to.
• Replace the button with a small UI message that states that you don't have permissions.
• Add UI text next to, around or before the disabled button explaining they don't have permission.
• Add an error modal upon clicking the button explaining the lack of permissions.

These are in order of "heavy" treatments, adding a modal being the heaviest and most costly in terms of effort.

Personal preference is to just remove the button entirely, unless user testing strongly suggests its absence is a source of massive, unprompted confusion.

[pguptaDS]

Yes agreed that the best solution here is to remove the button entirely. However, the team is working under some other constraints as well so this won't be possible (yet).

I think the modal will work best in our use case all things considered. Thanks @SiTaggart for a detailed response!