Variants for disabled buttons

What‘s the best practice for having disabled buttons? In the screenshot attached, for example the very first button (top-left) has:

Importance=Primary, State=Idle, Style=Text only, Disabled=False

And then the disabled button will have:

Importance=Primary, State=Disabled, Style=Text only, Disabled=True

But there is a catch. If disabled is a boolean, then how state can also have a value of disabled? Am I missing something?

What is the purpose of the boolean if you already have disabled as a state?

1 Like

I think you have to decide whether you want the boolean or the state. Theoretically you might want the boolean so you can show the hovered, pressed and idle states when a button is disabled. In that case you’d keep the boolean and remove the state. It’s also going to be more similar to code where whether or not a button is disabled is usually a completely separate property.

But in reality you probably don’t want different states for disabled as there’s no point responding to hover over or press if it won’t do anything. So the slightly simpler approach is to just have disabled as one of many states.

4 Likes

That‘s how I‘ve been doing it for years. I only saw some people use boolean as disabled, so I thought they might do something smarter that I know not of. :blush:

1 Like