Why You Shouldn’t Gray Out Disabled Buttons

How should disabled buttons appear when they’re inactive? The way most designers indicate an inactive state is by graying out the button. However, this approach often catches users off-guard because the button’s enabled state looks nothing like the disabled one. Going from gray to fully colored is an unpredictable change that can affect user expectations.

For a smooth and seamless experience, it’s best to avoid graying out your disabled buttons. Instead, you should decrease the opacity to make it transparent.

When the disabled button is transparent, users can see some semblance of the button in its enabled state. Although the button is faded out, some color still bleeds through for recognition. As the disabled button transitions to an enabled state, its new appearance is what they expect.

A transparent button also blends into the background more, while a gray one stands out in the foreground (unless the background is gray). Foreground elements are more noticeable, which means users are more likely to click a gray disabled button. When they do, they’ll wonder why it’s not doing anything.

Another issue with gray buttons is that it’s easy for users to mistake them for secondary actions. Gray is often used to communicate a low priority button (e.g., cancel buttons). When they see a gray button…