<commit_before><div class="bs-docs-section">
  <h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>

  <p class="lead">Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>

  <div class="bs-callout bs-callout-danger" id="callout-buttons-ff-autocomplete">
    <h4>Cross-browser compatibility</h4>
    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>.</p>
  </div>

  <h2 id="buttons-stateful">Stateful</h2>
  <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
  <div class="bs-callout bs-callout-info" id="callout-buttons-state-names">
    <h4>Use whichever state you like!</h4>
    <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
  </div>
  <div class="bs-example">
    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
      Loading state
    </button>
  </div><!-- /example -->
{% highlight html %}
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })<commit_msg>Mark stateful button feature as deprecated<commit_after><div class="bs-docs-section">
  <h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>

  <p class="lead">Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>

  <div class="bs-callout bs-callout-danger" id="callout-buttons-ff-autocomplete">
    <h4>Cross-browser compatibility</h4>
    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>.</p>
  </div>

  <h2 id="buttons-stateful">Stateful</h2>
  <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
  <p><strong class="text-danger">This feature is deprecated since v3.3.5 and will be removed in v4.</strong></p>
  <div class="bs-callout bs-callout-info" id="callout-buttons-state-names">
    <h4>Use whichever state you like!</h4>
    <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
  </div>
  <div class="bs-example">
    <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
      Loading state
    </button>
  </div><!-- /example -->
{% highlight html %}
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
{'fraction_non_alphanumeric': 0.18282773564463706, 'fraction_numerical': 0.013542795232936078, 'mean_word_length': 4.503725782414307, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 101, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2464800', 'n_tokens_mistral': 1233, 'n_tokens_neox': 1163, 'n_words': 306}