Sp-action-button conditional disabled


Having some trouble to set a conditional attribute disabled to sp-action-button.

Given boolean const allowed I wanted that component puts or remove the disabled attribute:

Is there any other property that can make some behaviour?

Some failed tries already:
<sp-action-button disabled={allowed}>
<sp-action-button ${if(allowed){({ disabled })}}>
<sp-action-button ${(if(allowed){ disabled })}>

Thanks in advance!

Could you try the following:
<sp-action-button disabled={allowed ? undefined : "disabled"}>

I tried and its always disabled like this.

<sp-action-button disabled={allowed ? null : true}> should work.

Also tested and it didn’t work.

Found a nice solution:
I created a custom component:

export function DisabledSpActionButton({ action, text, className, isDisabled }) {
  return (
      {isDisabled ? (
        <sp-action-button class={className} onClick={action} disabled>
      ) : (
        <sp-action-button class={className} onClick={action}>

Hm, usually it should work with undefined or null, weird.
You could also conditionally add the attribute:

<sp-action-button {...(isDisabled ? {disabled: true} : {})}>

If you name your variable disabled it could also be written as

<sp-action-button {...(disabled ? {disabled} : {})}>

Not sure if that looks better though :grin: at least it’s less code and you don’t have to repeat other properties.


Tks a lot! :slight_smile: