A disabled icon button must fade both glyph and type

What it is

When a button with an icon is disabled, greying only the type while the glyph stays fully saturated—or greying only the glyph while the type still looks live—reads as half-disabled. People click the part that is still awake. Disabled must pull icon and type (if any) to the same visibility, and the outline too when needed, so the whole control leaves the clickable set.

Why it happens

Attention goes to the patch that still has contrast. An icon is often larger and more filled than the word; fading type alone leaves a healthy-looking icon button. Fading the icon alone leaves live type, like a text button that still works. Either stump says “a path remains.” If the cursor stays a hand, or press still animates, the stump is read as “try it.” Full disable is a class change: the whole control exits the interactive set, rather than two inner elements taking their own opacities. An icon-only button has no type to fade; if disable only drops the container fill and the glyph keeps its color, the failure is the same.

Studying it

Compare mutilated disables: type only, icon only, both. The task is to find which actions are currently unavailable.

Independent variables: what is faded (type / icon / both / chrome), whether a pointer hand remains, whether press animates. Dependent variables: attempted clicks on stumps, stumps reported as available, missed true disables.

Telling people “some are disabled” makes them hunt for grey. Closer to the field: a real task whose toolbar still shows a Publish that should be disabled at this step.

Where it stops holding

Multicolor brand glyphs go muddy under a global opacity; they need a separate disabled palette, not a grey filter. Selected-and-disabled (an option that is on but cannot be turned off) must say “on” and “cannot change”; greying both loses on—keep the value with a stroke and drop clickability cues. Loading is not disabled: when the icon becomes a spinner, do not also lay a disabled grey on it, or it looks broken.

Applying it

• Bind disabled styling to the control root so icon and type inherit one opacity or one disabled palette; do not restyle only the word in a span.
• On an icon-only button, drop glyph, stroke, and fill together; do not change only the circular well.
• Remove the hand cursor and press animation while disabled.
• Verify by disabling an icon-plus-text button and covering type or icon. If the remaining half still looks clickable, disable is incomplete.

Related

• Within the group: E1.11.1 The five states must be checked per theme, not inverted from light · E1.11.3 Contrast of states must be rechecked on every container background · E1.11.4 Hover and disabled must not appear together
• Adjacent: D1.07 Disabled state · E1.13 Icon-plus-text buttons · E1.04 Icon-button ambiguity
• Search terms: disabled button · icon button · disabled affordance