Disabled state

1. What is a disabled button?
2. Should you use disabled buttons?
3. Should disabled buttons be focusable?
4. Why you shouldn t include disabled interaction elements in your design system?

What is a disabled button?

A disabled button is unusable and un-clickable. The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.).

Should you use disabled buttons?

While designing the UI, avoid using a disabled button as it becomes hard to find out why it is disabled and what should be done to make it enable. It is better to keep buttons enabled all the time and highlight the field if users don't provide the required information.

Should disabled buttons be focusable?

If you need to use disabled buttons, consider ways to make them focusable and useful by also making them more inclusive and providing a way out for customers to send all the details to the customer support.

Why you shouldn t include disabled interaction elements in your design system?

Disabled options only communicate implicitly. At best they are ambiguous; at worst, impenetrable. If you show an element but don't allow people to interact with it, they then have to interpret why they can't.