Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Button] Add "fill: color" to disabled button

See original GitHub issue

Feature Requests

When using SVG icons in Buttons the CSS attribute color doesn’t change the actual color of the SVG icon. Therefore an icon is not greyed out correctly when used with a disabled button. See demo below:

(there is a white icon on the Next button that should be greyed out)

I suggest that additionally to the color attribute that there is the fill attribute that would add the same color.

So instead of this:

There would be this CSS:

This would produce my expected output for the disabled button icon:

Issue Analytics

State:
Created 4 years ago
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

jamesmfriedmancommented, Apr 22, 2019

This issue is what originated https://github.com/material-components/material-components-web/issues/4633

0reactions

jamesmfriedmancommented, May 5, 2019

Yep, rmwc is rendering an svg inside of an i tag instead of the svg being the root node of the icon.

Top Results From Across the Web

Style disabled button with CSS - Stack Overflow

Change the background-color of the button when it is disabled · Change the image in the button when it is disabled · Disable...

Disabled buttons - W3Schools Tryit Editor

DOCTYPE html> <html> <head> <style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center;

Why You Shouldn't Gray Out Disabled Buttons - UX Movement

How should disabled buttons appear when they're inactive? The way most designers indicate an inactive state is by graying out the button.

Can we change background color of a disabled button in ...

That would work for normal buttons background color change but he wants to change the color for a disabled button. So your code...

How to style the disabled button using CSS - Reactgo

To style the disabled button, we can use the :disabled pseudo-class selector in css. Here is an example, that sets the background ,...