Screenshot
Description
When using buttons that contain both an icon and text, the primary color is applied to both the icon and the text even when the button is in a disabled state. The expected visual behavior for disabled buttons would typically involve a muted or greyed-out appearance, but this only seems to be fully applied after hovering over the button.
This is not the case with regular buttons with text only. In the screenshot above, both the "Apply" and "Save" buttons are disabled.
Comment From: dosubot[bot]
This happens because the icon in a disabled button doesn't automatically inherit the muted/greyed-out color like the text does. Superset's Button component wraps AntdButton and passes the disabled prop, but the icon (rendered by BaseIconComponent) uses its own color logic and doesn't adjust based on the button's disabled state. There are currently no CSS rules in the codebase to ensure icons inside disabled buttons are visually muted, so icons keep their primary color until hover or other CSS events trigger a style change. This is why you see the difference between text-only and icon+text buttons when disabled. A fix would likely involve adding a CSS rule targeting icons inside disabled buttons or updating the icon component to check for the disabled state and apply the correct color.
Button implementation
BaseIconComponent implementation
To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other 
