[Article] Don’t use disabled buttons

When we design a form, it’s really tempting to change the default state of the Confirm/ Save button to the disabled state. Why?

  • We don’t need to think about error scenarios of the form.
  • The data will be perfectly valid before being sent to the system.
  • Users don’t have a chance to make mistakes.

No errors, no mistakes, sounds like heaven, right? Yeah, but it feels like hell for users.

Why don’t we use a disabled button?

  • Users may find it hard to find out why the button was disabled and what should be done to enable it. Just remember the one above all principle is “Don’t make users think”
  • Poor contrast makes it difficult for users to read or recognize the button.

When do we use a disabled button?

Alright then, we still have some cases for a disabled button. This is the reason why this button state is still in our Tini design system. So when you use a disabled button, make sure the design communicates well with users. You can use inform/ helper text/ tooltip component to help users understand why the button was disabled.

In the context of the Tini team, we have 2 cases:

1. The feature was disabled.

In this case, we should provide the inform component to let users know why this button was disabled.

2. The limit of data was reached.

e.g., the amount is 0, or users can’t go to the previous page when the current page is the first page.


And that’s enough buttons for today :joy:.

p/s: When do you use disabled buttons for your designs? Let’s discuss.

5 Likes

Thank you for your sharing. I have a new lesson in my design journey.

2 Likes

Hay quá! Dzìa dizaa :love_you_gesture:

1 Like