Bootstrap 5 Buttons Disabled state

The disabled option is used to create a button with the disabled state. It is a boolean attribute for any button element. The disabled button means the button is inactive and it will not be active after clicking or hovering the button.

Disabled state Attribute:

• disabled: This attribute is used to create the disabled state button. This attribute makes the pointer-events: none to prevent the hover and active states from triggering.

Disabled state Class:

• .disabled: This class is used to create the disabled button. 

Note: Since, <a> tag does not support the disabled attribute, so we will use the disabled class to disable the <a> element button. The disabled <a> element should include aria-disabled="true" attribute to represent the state of the element.

Syntax:

// Disabled Button
<button type="button" class="btn btn-*" disabled>
 Disabled button
</button>

// Disabled Link
<a href="#" class="btn btn-* disabled" tabindex="-1" 
 role="button" aria-disabled="true">
 Disabled link
</a>

Example 1: In this example, we will use the disabled attribute to disable the buttons.

Output:

👁 Image

Example 2: In this example, we will use the .disabled class to disable the anchor link buttons.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#disabled-state