@@ -126,3 +126,99 @@ This class uses `pointer-events: none` to try to disable the link functionality
...
@@ -126,3 +126,99 @@ This class uses `pointer-events: none` to try to disable the link functionality
While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
{% endcallout %}
{% endcallout %}
## JavaScript behavior
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
### Custom states
Use JavaScript to change the text and "state" of a particular button. For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`.
**Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793)(e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details.
Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and**`aria-pressed="true"` to the `<button>`.
Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable toggling in their respective styles.
The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
{% callout danger %}
#### Cross-browser compatibility
[Firefox persists form control states (disabledness and checkedness) across page loads](https://github.com/twbs/bootstrap/issues/793). A workaround for this is to use `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
{% endcallout %}
## Stateful
Add `data-loading-text="Loading..."` to use a loading state on a button.
{% callout info %}
#### Use whichever state you like!
For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [See more on this below in the `$().button(string)` documentation](#buttons-methods).
#### Pre-toggled buttons need `.active` and `aria-pressed="true"`
For pre-toggled buttons, you must add the `.active` class and the `aria-pressed="true"` attribute to the `button` yourself.
{% endcallout %}
## Checkbox and radio
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
{% callout warning %}
#### Preselected options need `.active`
For preselected options, you must add the `.active` class to the input's `label` yourself.
{% endcallout %}
{% callout warning %}
#### Visual checked state only updated on click
If the checked state of a checkbox button is updated without firing a `click` event on the button (e.g. via `<input type="reset">` or via setting the `checked` property of the input), you will need to toggle the `.active` class on the input's `label` yourself.
