[Feature Request]: Add disabledReason to Button Component

[hunoz]

Description

Currently, the Button component allows for a disabled attribute, but no disabledReason attribute, telling the user why it's disabled. The addition of this attribute would bring it in line with the ButtonDropdownProps.ItemOrGroup attributes, which allows each item to specify why it is disabled to the user.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate requests

[johannes-weber]

Hi @hunoz, thanks for your feature request! Could you elaborate on your specific use case? We'll use this data to evaluate further and make a determination.

For button dropdown, it's more meaningful to be able to see disabled reasons, since users can't see the items until they open it. For normal buttons you could still indicate the reasons in different ways like in alert or description text instead of relying on a hover action which is not mobile friendly.

[hunoz]

Hey there,

I can't speak on the mobility of this, but there isn't really a way to let the user know why the button is disabled aside from a generic alert using something like the Flashbar.

As for my specific use case, at the header portion of my page, I have a button next to my button dropdown, as the context of the button doesn't fit with the others, but I cannot easily tell the user why the button is disabled (be it permissions or an error). This leads to confusion from the user as they believe the button should be enabled for one reason or another. As mentioned, I could use something like a flashbar to notify the user why the button is disabled, however I believe this to be a worse user experience as the notification would feel disconnected from the button and would be overkill especially if the user had no intention of using the button.

[n3662]

+1 for this, we require it to notify the user for required permissions/reason why the button is disabled. A hover action is fine for us as our clients are all desktop based.