Disabled Button#

Demo#

Explanation#

<div id="container" data-signals="{shouldDisable:false}">
  <button
    id="target"
    data-on-click="shouldDisable.value = true;sse('/examples/disable_button/data')"
    data-attributes-disabled="shouldDisable.value"
  >
    Click Me
  </button>
  <div id="results">
    <h1>Results from server</h1>
  </div>
</div>

The example has been slowed down to show the disabled state of the button. By using signals you can disable the button and then re-enable it with a server response. In general signals allow for general reactivity that would otherwise have to be extra code paths such as hx-disable-elt in HTMX.