datastar/site/static/md/examples/disable_button.md

Disabled Button

Demo

Click Me

Explanation

<div id="container" data-signals="{shouldDisable:false}">
  <button
    id="target"
    data-on-click="$shouldDisable = true;@get('/examples/disable_button/data')"
    data-attr-disabled="$shouldDisable"
  >
    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.