bootstrap_ref_js_button

Bootstrap JS Button

JS Button Functionality (button.js)

Bootstrap’s button plugin provides more control over button states, such as toggling active states or creating button groups that behave like checkboxes or radio buttons. Much of this functionality can be achieved using data attributes.

For a tutorial about Button styling and groups, read our Bootstrap Buttons Tutorial.

Button Styling Classes (Recap)

These classes can be used to style any <a>, <button>, or <input type="button"> elements:

Class
Description
Example (Conceptual)


.btn
Base class for button styling.
Try it


.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark
Contextual color classes. `.btn-secondary` is the new default-like style.
Try it


.btn-outline-primary, etc.
Outline button styles for each contextual color.
Try it


.btn-link
Makes a button look like a link while retaining button padding and behavior.
Try it


.btn-lg, .btn-sm
Size modifiers for larger or smaller buttons. `.btn-xs` was removed in Bootstrap 4+.
Try it


.btn-block (Removed in B5)
Use grid column classes or width utilities (`.w-100`) for block-level buttons.
Try it


.active
Applies an active (pressed) appearance to a button.
Try it


.disabled, disabled attribute
Makes the button appear and behave as disabled. Use the `disabled` attribute on `<button>` elements.
Try it

Toggle States with Data Attributes

Add data-bs-toggle="button" to activate toggling on a single button. This will programmatically toggle the .active class and aria-pressed attribute on the button.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
  Toggle button
</button>

For checkbox or radio-like behavior in button groups, you’ll typically wrap buttons in a div.btn-group and use JavaScript or more complex data attribute setups if needed. See the main Buttons and Button Group tutorials.

Via JavaScript

You can control button states programmatically:

// Get the button element
var myButtonElement = document.getElementById('myToggleButton');

// Create a Bootstrap Button instance if you need to call methods
var bsButton = new bootstrap.Button(myButtonElement);

// To toggle its state (if it has data-bs-toggle="button")
// bsButton.toggle(); // This method is available on the instance

However, for simple toggling, the data-bs-toggle="button" attribute is often sufficient and requires no custom JavaScript.

Button Options

The button component in Bootstrap 5 primarily uses data attributes for its behavior. There are no specific JavaScript options passed during instantiation for the basic toggle functionality.

Button Methods

The following table lists available JavaScript methods for the button component.

Note: The old jQuery-style methods like .button('loading') or .button('reset') are not part of the Bootstrap 5 JavaScript API. Managing loading states or changing text requires manual DOM manipulation.

Method
Description
Example


`toggle()`
Toggles the push state (active class and aria-pressed attribute). Assumes the button has `data-bs-toggle="button"`.
`var bsButton = new bootstrap.Button(myButtonEl); bsButton.toggle();`


`dispose()`
Destroys a button's instance, removing event listeners and data.
`var bsButton = new bootstrap.Button(myButtonEl); bsButton.dispose();`


`getInstance(element)`
Static method to get the button instance associated with a DOM element.
`var instance = bootstrap.Button.getInstance(myButtonEl);`


`getOrCreateInstance(element, [config])`
Static method to get a button instance or create a new one if it doesn't exist.
`var instance = bootstrap.Button.getOrCreateInstance(myButtonEl);`

To create a ‘loading’ state, you would typically disable the button and change its text content manually using JavaScript, for example:

var mySubmitButton = document.getElementById('submitBtn');
mySubmitButton.disabled = true;
mySubmitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';