Bootstrap 5 Button Plugin

Bootstrap 5 buttons plugin gives the flexibility to play around with setting the toggle states and also with adding certain predefined button methods which help to add utility to the button or even the ability to operate even outside the actual button.

Bootstrap 5 Button plugin used classes for toggling states:

• active: This class is added to pre-toggle the button.
• disabled: This class when added to the button disabled the button and we can click on it anymore.

Bootstrap 5 Button plugin used methods:

• toggle(): Changes the push status. This creates the impression that the button has been pressed.
• dispose(): Destroys a button on an element. (Deletes the DOM element's stored data)
• getInstance(): You may access the button instance linked to a DOM element using a static method.
• getOrCreateInstance(): Static function that creates a new button instance if the one connected with the DOM element wasn't initialized or returns the related button instance.

Syntax:

// Adding un-toggled button:
<button type="button" class="btn" 
 data-bs-toggle="button">
 <--Code Here-->
</button>

// Adding un-toggled button:
<button type="button" class="btn active" 
 data-bs-toggle="button">
 <--Code Here-->
</button>

// Adding Disabled button:
<button type="button" class="btn" 
 disabled data-bs-toggle="button">
 <--Code Here-->
</button>

// For using Button methods
button-instance.toggle()// or any other method

Example 1: This code example demonstrates how we can create Untoggled, Pre-toggled, and disabled-buttons. We can see how we toggle an Untoggled button and untoggle a Pre-toggled button and we can't do anything with the disabled-buttons.

Output:

Example 2: This code example demonstrates how we can use the getOrCreateInstance() method and the toggle() and dispose() buttons methods. Here the instance is created using the getOrCreateInstance() method and then the button is toggled and disposed of using the toggle and dispose methods. Disposing of the second demo button is shown in the browser dev tools.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#button-plugin