Sp-button with svg not disabled


I’m trying to disable sp-button, but if I put a svg inside, when I click the svg icon, onClick is fired always

              onClick={() => {
              <Apply />

Also I am trying to change the icon color and it never changes with sp-button:disabled { fill: red }

Thanks in advance


sp-button:disabled { pointer-events: none; }
sp-button:disabled svg { fill: red; }

It doesn’t work for me

Do you have a full minimal reproducible component example?


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


<sp-button id="btnPopulate" disabled="disabled">

Sorry, not at my PC, can’t check myself for sure

No problem, but same result :frowning:

I wouldn’t be surprised if it’s just another unsupported UI feature in UXP :man_shrugging: 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 :frowning:

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 :confused:

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.