Consider removing the disabled button from EUI #5773
Replies: 5 comments 5 replies
-
Hi @gavinwye, Thanks for opening this discussion. We are considering changing the disabled buttons to make them more inclusive. You can follow the issue here: #5666. |
Beta Was this translation helpful? Give feedback.
-
One other thing to note is the all EuiButton's accept both In general, it's a hard ask to completely remove default HTML functionality from a component that renders that HTML element. Disable buttons are valid HTML elements and do serve a purpose when used correctly. Like @miukimiu said, we're investigating how to make this state better for all, but we cannot remove the functionality completely. I'd love to see some guidelines written around the proper usage of disabled buttons. @gavinwye If you'd like to write something up, we can add it do our docs. |
Beta Was this translation helpful? Give feedback.
-
@gavinwye @cchaos we can start by doing an inventory of our products to see what are the situations where we use disabled buttons, for example: Then, we can add the screenshots to a Figma project and try to come up with better patterns or guidelines. Just to give an example. For the screenshots I shared, I don't see a problem with the pattern of having disabled buttons to prevent users to submit. But I think from a design perspective we can improve the button design to allow more contrast and better a11y (#5666.). As the following article points out, another solution would be to never disable the button: https://css-tricks.com/making-disabled-buttons-more-inclusive/. On clicking the submit button the errors would appear. But I prefer the disabled button version (if the button a11y is in place). So to tackle this issue we can start by doing an inventory. Then try to come up with better patterns/guidelines or improve the designs. @gavinwye do you want to create a Figma for this? And then we can all collaborate? |
Beta Was this translation helpful? Give feedback.
-
I think we should NOT remove the disabled button in EUI. But we should, in UX guidelines, suggest a better workflow to avoid the usage of disabled buttons IF possible. |
Beta Was this translation helpful? Give feedback.
-
Hey everyone thanks for the comments. I've started a Figma file to start auditing these buttons here: https://www.figma.com/file/vU2DfvWdtZDitqhKxoP7L6/Disabled-buttons-in-Kibana?node-id=7%3A8 @miukimiu I've added the screenshots you've added above. I don't know an efficient way to collect all of the other disabled buttons. I've searched the Kibana repo again and found 12969 occurrences of To be clear on my opinions on this I've listed some things below. Disabled buttons are confusing for users for the following reasons:
I'm much more in favour of the approach of showing an error when a button is clicked that tells users what they need to do to solve that problem. I think it's a better design. |
Beta Was this translation helpful? Give feedback.
-
I'd like us to consider removing the disabled buttons from EUI for the following reasons:
Image of buttons for reference
![image](https://user-images.githubusercontent.com/868772/162464781-2b63a341-4372-48d9-baf0-a4c62e20758e.png)
Beta Was this translation helpful? Give feedback.
All reactions