Salesforce lwc onclik function not running

I have a lwc with button "Send" using onclick={sendSMS} in the html. The sendSMS function does not fire.

Here is the HTML:

<template>
  <template if:true={properties.showName}>
    <lightning-input
      label="Contact"
      value={params.name}
      name="name"
      onchange={valueChanged}
      disabled="true"
    ></lightning-input>
  </template>
  <lightning-input
    label="Mobile Phone"
    value={params.mobilePhone}
    name="mobilePhone"
    onchange={valueChanged}
    disabled={properties.isMobilePhoneDisabled}
  ></lightning-input>
  <lightning-input
    label="Message"
    value={params.content}
    name="content"
    onchange={valueChanged}
    disabled={properties.isContentDisabled}
  ></lightning-input>
  <div class="slds-m-top_small">
    <lightning-button
      disabled={properties.isSendDisabled}
      onclick={sendSMS}
      label="Send"
      variant="brand"
    ></lightning-button>
  </div>
  <template if:true={properties.isLoading}>
    <lightning-spinner size="medium"></lightning-spinner>
  </template>
</template>

Here is the js:

import { api, LightningElement } from "lwc";
import { getRecordNotifyChange } from "lightning/uiRecordApi";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import sendSMS from "@salesforce/apex/SendSMSController.sendSMS";

export default class SendSms extends LightningElement {
  @api properties = {
    showName: false,
    isMobilePhoneDisabled: false,
    isContentDisabled: false,
    isSendDisabled: false,
    isLoading: false
  };

  @api params = {
    contactId: null,
    name: null,
    mobilePhone: null,
    content: null,
    correlationId: null
  };

  valueChanged(event) {
    this.dispatchEvent(
      new CustomEvent("updatesendsmsparams", {
        detail: {
          param: event.target.name,
          value: event.target.value
        }
      })
    );
  }

  sendSMS() {
    this.properties.isLoading = true;
    sendSMS({
      mobilePhone: this.params.mobilePhone,
      contactId: this.params.contactId,
      content: this.params.content,
      correlationId: this.params.correlationId
    })
      .then(() => {
        this.showToast("Sent!", "The SMS was sent", "success");
        getRecordNotifyChange([{ recordId: this.params.contactId }]);
        this.properties.isLoading = false;
        this.dispatchEvent(
          new CustomEvent("updatesendsmsparams", {
            detail: {
              param: "content",
              value: null
            }
          })
        );
      })
      .error((error) => {
        this.showToast("Could not send SMS", error, "error");
        this.properties.isLoading = false;
      });
  }

  showToast(title, message, variant) {
    const evt = new ShowToastEvent({
      title: title,
      message: message,
      variant: variant
    });
    this.dispatchEvent(evt);
  }
}

What is missing?

I try to press the "Send" button, but nothing happens. I tried adding debug statements, but nothing is logged. It seems like the button is not really connected to the function.

You named your onclick sendSMS and you also imported the apex function with same local name/alias/whatever is the right terminology. Identical name, even same case ;)

What would you expect to happen? One function overwrites another? Some infinite recursion loop?

Rename the onclick-y one to something else.