Hello
I’m trying to disable sp-button, but if I put a svg inside, when I click the svg icon, onClick is fired always
<sp-button
id="callX"
disabled
onClick={() => {
callX();
}}
>
<Apply />
</sp-button>
Also I am trying to change the icon color and it never changes with sp-button:disabled { fill: red }
Thanks in advance
Try
sp-button:disabled { pointer-events: none; }
sp-button:disabled svg { fill: red; }
Do you have a full minimal reproducible component example?
Yes!
Try this:
If you click in disabled button its ok, but if you do it in svg icon… is fired
Have you tried setting the svg to “disabled” also?
Yes, I tried and it doesn’t work
Try:
<sp-button id="btnPopulate" disabled="disabled">
Sorry, not at my PC, can’t check myself for sure
No problem, but same result 
I wouldn’t be surprised if it’s just another unsupported UI feature in UXP
If I remember, I’ll try to play around after work with it. Had to implement a bunch of CSS workarounds on my own plugin 
I tried to play around and it seems that :disabled
selector is just not supported. Same for sp-action-button
Also even on a not disabled button when you add pointer-events: none
, it works on a button itself (click is not triggered), but icon still receives the event and triggers a click (same happens on a stock disabled sp-button
- click is triggered if clicked on icon)
I’ll just ping @kerrishotts here. Sometimes these restrictions just doesn’t make sense 
I have a feature request for my plugin which also requires dealing with disabled buttons, but it appears I’ll have to inform user, that it’s blocked by Adobe
1 Like
@kerrishotts, any insight on the :disabled
icon click issue?
I am having a similar problem with click events on buttons with svg icons. Clicking the exterior of the button fires the button – but clicking on the interior of the svg icon and the button does not fire.
Annoying with icon only svg buttons.
I found a partial solution
onClick={(ev) => {
if (!ev.currentTarget.disabled) {
callX();
}
}}
On which element exactly? If I’m not mistaken, currentTartget
is the icon if you click on the icon and it’s not actually disabled even if the button is, isn’t it?
In the button. My svg is inside the button and it works like this (maybe works because is inside?).
And also color is changing with this:
.action-button-disabled {
fill: red;
}
.....
const disabled = { ...(!enableControls ? { disabled: true } : {}) };
.....
<sp-button
id="callX"
class={`action-button ${disabled.disabled ? 'action-button-disabled' : ''}`}
{...disabled}
onClick={(ev) => {
if (!ev.currentTarget.disabled) {
callX();
}
}}
>
<Apply />
</sp-button>